React Native | image slider, 이미지 슬라이더 구현

아래 React Native 개발 환경 구축을 바탕으로 작성되었습니다.

React Native | 맥(Mac) 개발 환경 구축

 

---

 

아래와 같은 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-

react-native-image-slider-box