(React Native) 스크롤바, 인디케이터

스크롤바 공부 and 화면 아래 인디케이터 만들기!

 

<스크롤바>

 

1. 스크롤바 뷰 생성

우선 import 해줍니다.

 

2. View 생성과 똑같이 하면 됩니다.

이렇게 하면 상하로 스크롤바가 됩니다.

 

이렇게 하면 가로로 스크롤바가 됩니다.

 

3. 여기서 서로 다른점을 보실 수 있는데, pagingEnabled가 있습니다.

 

- pagingEnabled는 React Native의 ScrollView 컴포넌트에서 사용되는 속성으로, 페이지 단위 스크롤이란 뜻입니다.

- 간단하게 말씀드리면 한번에 하나의 페이지만 보입니다.

- 옆으로 넘기거나 위로 넘기면 이전 또는 다음 페이지가 나오는 겁니다.

---

<인디케이터>

 

스크롤바 아래에 해당 페이지가 몇번 페이지인지 볼 수 있게끔 점으로 나타내주기를 해보겠습니다.

 

1. 현재 Page인디케이터에 대한 함수를 만들어 줍니다.

아래에 현 페이지에 대한 점만 색이 들어오게 끔 style들을 만들어 줍니다.

우선 저는 페이지를 3개 정도만 생각하여 구현 해보겠습니다.

이렇게 되면 초기 상태는 1로 고정을 하여 스크롤 넘김 이벤트를 받음에 따라 현재 Page의 위치를 알 수 있습니다. 

2. 스크롤 뷰에 스크롤 넘김에 대한 event 발생을 넣어줍니다.

그리고 해당 뷰 안에 Page인디케이터에 현재 페이지를 받을 변수들을 넣어줍니다.

3. Expo를 실행하여 확인해줍니다.

페이지 넘김에 따라 1,2,3 순서에 점의 색깔 하나만 다르게 잘 나옵니다!