[RN] react-native ScrollView

반응형

ScrollView란

 ScrollView란, 데이터의 양이 많아 화면을 넘어가게 될 때, 스크롤이 생겨 화면을 넘길 수 있게 해주는 컴포넌트이다.

 ScrollView 컴포넌트가 스크롤되어 동작하기 위해서는 높이를 제한해주어야 한다. 높이 값이 제한되지 않은 자식이 있다면 부모의 높이로 제한된다.

 

 

가끔 ScrollView나 FlatList에서 scroll bar의 위치가 아래와 같이 엉뚱한 곳에 노출될 때가 있다.

Scroll bar 위치 이탈1

 

Scroll bar 위치 이탈

 

 

ScrollView

FlatList

 

 

그럴땐 위의 코드와 같이 ScrollView랑 FlastList 라이브러리 속성에

scrollIndicatorInsets={{right: 0.1}} 을 사용해주면 오른쪽 끝으로 간다.

 

scrollIndicatorInsets={{right: 0.1}}