[TIL] scrollView에서 스크롤 할 때 특정 컴포넌트를 화면 상단에 고정하는 방법

다른 앱들 보면 스크롤 하다가 상단에 컴포넌트가 고정되는 것을 볼 수 있는데 react native에서는 생각보다 쉽게 할 수 있다.

 

오늘 한 삽질의 역사를 뒤돌아 보면 처음에 position을 absolute로 주면 될까 해서 발악해봤는데 이건 답이 아니더라... ㅜㅠ

 

그러던 차에 구글링을 열심히 하던 도중 stickyHeaderIndices 라는 옵션이 있다는 것을 알게 되었다...

 

이 옵션은 해당 scrollview에 n번째 해당하는 컴포넌트를 스크롤하다가 상단에 고정하는 기능을 제공하는데

 

아래와 같이 사용하면 된다.

 

<ScrollView 
	stickyHeaderIndices={[2]} // 이렇게 배열 안에 n 번째 컴포넌트를 입력
>
 	{...chiled)
</ScrollView>

배열 안에 2, 3 과 같이 복수로 넣게 되면 2번째 3번째 요소가 고정되는 것을 볼 수 있다.

 

나는 2번째 요소만 고정하면 되서 2를 넣었는데 상황에 따라 효율적으로 사용하면 될듯 싶다.

 

참고로 stickyHeaderIndices 옵션으로 선택된 컴포넌트는 onLayout을 이용하여 좌표를 구하면 y 값이 0으로 고정된다.

 

그래서 클릭하면 y좌표를 이용하여 최상단으로 자동 스크롤 되게 하려고 했는데 실패하여

 

0, 1번째 엘리먼트들의 높이값을 이용하여 구현했다.

 

암튼 scrollview는 파면 팔 수록 기능이 더 나오는데 공부를 더 깊게 해야 하나 싶다...