리액트 네이티브 (React Native, RN)
React Native | image slider, 이미지 슬라이더 구현
Valar
2021. 6. 23. 14:37
반응형
아래 React Native 개발 환경 구축을 바탕으로 작성되었습니다.
아래와 같은 image slider 기능을 만들어본다.
react-native-image-slider-box 설치
npm i react-native-image-slider-box
Ex) SliderBox
<SliderBox images={ [images..] } [options..] />
App.js
import React from 'react';
import {
View,
Image
} from 'react-native';
import { SliderBox } from 'react-native-image-slider-box';
function sliderTouch(index) {
alert(index);
}
function App() {
return (
<View>
<SliderBox
images={[
"https://source.unsplash.com/1024x768/?nature", // Network image
"https://source.unsplash.com/1024x768/?water", // Network image
"https://source.unsplash.com/1024x768/?girl", // Network image
"https://source.unsplash.com/1024x768/?tree" // Network image
//require('./assets/images/girl.jpg') // Local image
]}
onCurrentImagePressed={
index => {
console.log('image pressed index : ' + index); // console log index
sliderTouch(index); // callback function choose index
}
}
autoplay // auto play
circleLoop // loop
/>
</View>
);
}
export default App;
Reference
https://www.npmjs.com/package/react-native-image-slider-box/v/1.0.12#usage-
반응형