Eojin Han

참조문서 ScrollView 다루기 기본 수직 스크롤뷰 가로 스크롤뷰 기타 Props 스크롤바 제거 참고사항

참조문서

ScrollView 도큐먼트 : https://reactnative.dev/docs/scrollview

ScrollView 다루기

여러개의 Components와 View를 담을 수 있는 일반적인 스크롤 가능한 컨테이너.

ScrollView 안의 item들은 같은 종류일 필요는 없다.

기본적으로는 verical (위아래 스크롤) 속성,

horizontal property 설정으로 가로 스크롤뷰도 가능.

기본 수직 스크롤뷰


import React from 'react';
import { Image, ScrollView, Text } from 'react-native';

const logo = {
  uri: 'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64
};

export default App = () => (
  <ScrollView> //<ScrollView horizontal>로 설정하면 가로 스크롤뷰가 됨.
    <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>If you like</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>Scrolling down</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>What's the best</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>Framework around?</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 80 }}>React Native</Text>
  </ScrollView>
);

가로 스크롤뷰


<ScrollView horizontal={true}>
	블라블라 스크롤뷰 내용 작성
</ScrollView>

기타 Props

horizontal과 함께 쓰일 수 있는 Prop으로 pagingEnabled Prop이 있다. 페이징 단위로 스와이핑 가능.

ios에서 zoom it and out 적용 ⇒ maximumZoomScale, minimumZoomScale props

스크롤바 제거


showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}

참고사항

ScrollView는 안에 얼마 만큼의 요소가 들어있건 상관없이 전부 다 한번에 렌더링한다.

따라서 작은 크기의 요소들만 있다면 최적으로 돌아가지만, 내용이 많다면 부하가 많이 걸린다.

⇒ 현재 화면에 보여야하는 요소만 그때그때 렌더링하는 FlatList를 사용하자.