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를 사용해야 합니다.
'React Native' 카테고리의 다른 글
[React Native] 문제 해결하기(Troubleshooting) (0) | 2024.06.24 |
---|---|
[React Native] 리스트 표시하기(FlatList, SectionList) 사용법 (0) | 2024.06.24 |
[React Native] 텍스트 입력 처리하기(Text Input) 사용법 (0) | 2024.06.24 |
[React Native] 리액트 기본 사항 (0) | 2024.06.24 |
[React Native] 핵심 구성 요소 및 기본 구성 요소 (0) | 2024.06.24 |