[React Native] ScrollView 사용하기

ScrollView는 여러 컴포넌트와 뷰를 포함할 수 있는 일반적인 스크롤 컨테이너입니다. 스크롤 가능한 항목은 이질적일 수 있으며, horizontal 속성을 설정하여 세로와 가로로 모두 스크롤할 수 있습니다. 이 예제는 세로 ScrollView를 생성합니다.

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

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

const ScrollLogo = () => {
    return (
        <ScrollView>
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
            <Image source={logo} />
        </ScrollView>
    )
}

export default ScrollLogo

ScrollView는 pagingEnabled 속성을 사용하여 스와이프 제스처를 통해 뷰를 넘길 수 있도록 설정할 수 있습니다. Android에서는 ViewPager 컴포넌트를 사용하여 수평 스와이프를 구현할 수 있습니다. iOS에서는 ScrollView를 단일 항목으로 사용하여 사용자가 콘텐츠를 확대/축소할 수 있도록 할 수 있습니다. maximumZoomScale과 minimumZoomScale 속성을 설정하면 사용자는 확대/축소 제스처를 사용하여 콘텐츠를 확대하거나 축소할 수 있습니다.

ScrollView는 제한된 크기의 적은 수의 항목을 표시하는 데 가장 적합합니다. ScrolView의 모든 요소와 뷰는 화면에 현재 표시되지 않더라도 렌더링됩니다. 화면에 맞지 않는 긴 목록의 항목이 있는 경우 대신 FlatList를 사용해야 합니다.