ScrollView
에 ref
를 걸어서, ScrollView
의 특정 위치로 스크롤을 이동해야 하는 경우가 생각보다 많다.
scrollTo
메서드와, scrollToEnd
메서드를 자주 사용하게 된다.
그런데 분명 해당 메서드를 탐에도 불구하고, 스크롤이 이동하지 않는 이상한 경우가 있다. 아니, 많다..
렌더 속도 때문에 생겨나는 문제다.
scrollTo
메서드와 scrollToEnd
메서드를 먼저 타고, 그 다음에 내용물이 렌더되면서 생기는 문제인 것이다.
이런 문제가 생겼을 때 자세히 보면, 화면이 먼저 한번 덜컹 하고 (scroll 을 시도했다는 뜻) 뒤늦게 화면이 렌더되는 걸 볼 수 있다.
ScrollView
의 onContentSizeChange
props 를 사용하면 된다.
공식 문서의 onContentSizeChange
설명을 들어보면 다음과 같다.
Called when scrollable content view of the ScrollView changes.
ScrollView 내부의 content 가 변경되었을 때 불린다.
따라서 이렇게 하면 된다.
<ScrollView
ref={scrollViewRef}
onContentSizeChange={() => {
// 여기다가 어떤 경우에 스크롤을 하면 될지에 대한 조건문을 추가하면 된다.
this.scrollView.scrollToEnd({ animated: false })
}}>
</ScrollView>