Using a ScrollView

ScrollView

ScrollView는 안에 다양한 컴포넌트를 포함시켜도 스크롤이 가능하게끔 설계가 되어있습니다.

또한 가로 세로도 모두 포함을 합니다.

 

아래 예시에서는 vertical(세로) ScrollView에 대해서 예제를 보여드리도록 하겠습니다.

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>
    <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 Component에서는 paging 처리를 설정할수가 있습니다. 마치 안드로이드에서는 ViewPager 처럼 "pagingEnabled"을 통해서 설정할수가 있습니다.

 

또한 maximumZoomScale , minimumZoomScale 을 통해서 zoom 설정을 할수가 있습니다.