React Native - Sticky Header (헤더 고정)

Sticky Header 사용법

앱을 만들다보면 스크롤을 내릴때 헤더를 고정하는 Sticky Header를 구현하고 싶을 때가 있는데요. React Native ScrollView에서는 간단히 구현할 수 있습니다.

아래와 같이 스크롤 뷰 속성에 stickyHeaderIndices 를 추가하면 됩니다.

<ScrollView
  stickyHeaderIndices={[0]} // 숫자: sticky 속성을 사용할 컴포넌트의 위치
>
  ...
</ScrollView>

예를 들어 1번째 컴포넌트를 고정하고 싶다면 위와 같이 배열 안에 숫자를 0으로 설정해주면 됩니다.
만약 1로 하면 2번째 컴포넌트가 고정됩니다 :)

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)