노마드 리액트 강의를 보면서 알게 된 Scroll View의 props 몇 가지를 정리해보고자 한다
horizontal
스크롤뷰를 쓰면 기본으로 column으로 스크롤 할 수 있게 되어있는데 이를 가로로 바꾸고 싶다면 이 속성을 사용하면 된다
더 자세하게 말해보자면 ScrollView 안에 있는 자식 요소들이 가로로 스크롤 된다는 말이다
다음과 같이 사용한다
<ScrollView horizontal>
ContentContainerStyle
ScrollView의 style을 만들고 싶을 때 우리가 일반적으로 사용하는 style prop을 사용하면 적용이 안 된다 ScrollView에 style을 주고 싶다면 ContentContainerStyle prop을 사용하면 된다
다음과 같이 사용한다
<ScrollView horizontal ContentContainerStyle={styles.어쩌구}
showsHorizontalScrollIndicator
이 prop에 false값을 주면 스크롤 인디케이터를 숨길 수 있다
다음과 같이 사용가능하다
<ScrollView showsHorizontalScrollIndicator={false} ContentContainerStyle={styles.어쩌구}
핸드폰 사이즈를 알려주는 API : Dimensions
응용프로그램 창의 width와 height를 알 수 있다
다음과 같이 사용하면 된다
const {height, width} = Dimensions.get('window');
이렇게 쓴 후 console.log(height, width)를 해보면 에뮬레이터 창의 width와 height를 알 수 있다
왜 이걸 갑자기 사용하냐면 가로로 스크롤을 넘길 때마다 하나의 글만 보이게 하고 싶을 때 휴대폰의 width를 알면 하나의 페이지마다 하나의 글만 넣을 수 있게 설정할 수 있기 때문이다
페이지 생성 API : pagingEnabled
horizontal pagination에 사용가능하고 한 번에 한 페이지만 스크롤 할 수 있다
즉 한 번 스크롤을 하면 여러 페이지를 한 번에 스크롤 하지 못하고 한 번 스크롤 시 하나의 페이지만 보여주는 것이다
다음과 같이 사용가능하다
<ScrollView pagingEnabled horizontal ContentContainerStyle={styles.어쩌구}