ScrollView 모드에서 내장된 horizontal 구성 요소를 사용하여 React Native에서 캐러셀을 만들 수 있습니다.


ScrollView는 모든 반응 하위 구성 요소를 세로로 렌더링하지만 다음을 사용하여 가로로 한 행에 정렬할 수 있습니다.

<ScrollView horizontal>

이 예에서는 멋진 효과를 얻기 위해 헤더에 Image 구성 요소를 겹치는 방법을 보여줍니다. 터치가 매우 유동적이고 빠르기 때문에 사용자는 고성능 애플리케이션이라는 느낌을 받을 수 있습니다.

JavaScript 및 스타일 시트에서 실행하고 집중하기 쉽게 유지하기 위해 Expo을 사용하여 예제를 만들었습니다.

전체 캐러셀은 하나의 구성 요소에 적합하며 주요 부분은 README에 설명되어 있습니다.

저장소에서 코드 예제를 확인할 수 있습니다.

나바로악셀 / react-native-scrollview-carousel-예제

ScrollView 가로를 사용하는 React Native의 가장 간단한 캐러셀 예제

react-native-scrollview-carousel-예제

기본 제공 ScrollView를 사용하는 React Native의 가장 간단한 캐러셀 예제
수평 모드.

개발 환경 설정

Expo CLI 명령줄 유틸리티를 설치합니다.

npm install -g expo-cli

저장소를 복제하고 종속 항목을 설치합니다.

git clone https://github.com/navarroaxel/react-native-scrollview-carousel-example.git
cd react-native-scrollview-carousel-example
npm install

예제 앱 시도

앱의 로컬 개발 서버를 시작합니다.

npm start

그런 다음 엑스포 지침에 따라 휴대폰이나 에뮬레이터에서 앱을 엽니다.

ScrollView는 어떻게 작동합니까?

ScrollView는 모든 반응 하위 구성 요소를 수직으로 렌더링하지만
다음을 사용하여 가로로 배열하십시오.

<ScrollView horizontal>

이 예에서는 헤더에서 Image 구성 요소를 겹치는 방법을 보여줍니다.
멋진 효과를 얻으려면. 터치가 너무 유동적이고 빠르기 때문에 사용자가 감각을 느낄 수 있습니다.
고성능 애플리케이션의

성능 문제

ScrollView는 모든 반응 하위 구성 요소를 렌더링합니다. 필요한 경우…

View on GitHub


앱에서 어떤 캐러셀 구성요소를 사용하시나요? 이것에 대해 의견을 남겨주세요!