FrontEnd/React Native

[react native] 화면 스크롤 하기

무무둥 2023. 2. 24. 23:51

https://reactnative.dev/docs/scrollview

 

ScrollView · React Native

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

reactnative.dev

import {View, ScrollView} from 'react-native';

export default function App() {
  return (
  	<View>
    	<ScrollView>
        
        	// 이곳의 컴포넌트들은 scroll 처리 된다.
        
        </ScrollView>
    </View>
  )
}

Props

- horizontal : 수평 스크롤 모드 (기본 false)

- [IOS] indicatorStyle : 스크롤바 스타일 지정
- pagingEnabled : 스크롤이 페이지 단위로 넘어가도록 지정 (기본 false)
- showsHorizontalScrollIndicator : 수평 스크롤 바 display 여부 지정  (기본 true)

- showsVerticalScrollIndicator : 수직 스크롤 바 display 여부 지정 (기본 true)
- contentContainerStyle : 일반 style로 지정 할 경우 다른 컴포넌트들과 style이 어울리지 않기 때문에 이를 해소해 주기 위해 사용