[React Native -23] 이미지 슬라이드 구현

상품 Detail 페이지에서 이미지를 넘길때 슬라이더를 구현해보고자 한다.

 

 

react-native-web-swiper 라이브러리를 사용할 것이다

 

✅ swiper 라이브러리 설치

npm i react-native-web-swiper

https://github.com/reactrondev/react-native-web-swiper

GitHub - reactrondev/react-native-web-swiper: Swiper-Slider for React-Native and React-Native-Web

 

위의 사이트의 설명대로 해주면 끝 

import React, { Component} from 'react';
import { View,Text,Image, Dimensions} from 'react-native';
import { styles } from "../../styles/home";
import Swiper from 'react-native-web-swiper';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            images: [
              "https://source.unsplash.com/1024x768/?nature",
              "https://source.unsplash.com/1024x768/?water",
              "https://source.unsplash.com/1024x768/?girl",
              "https://source.unsplash.com/1024x768/?tree", 
            ],
          };
          
    }
    render() {
        const SCREEN_HEIGHT=Dimensions.get("window").height;
        return (
            <View style={styles.container}>
              <Text>Home</Text>
                  <View style={styles.slideImageView}>
                      <Swiper 
                        loop 
                        timeout={3}
                        //controlsEnabled={false}
                        containerStyle={{width:'100%',height:SCREEN_HEIGHT/4}}>
                        {this.state.images.map((item,i)=>
                            <View>
                                <Image  source={{ uri: item}} style={styles.allImagesImage}/>
                            </View>
                        )}
                    </Swiper>
               </View>
           </View>
        );
    }
}
export default Home;

 

 

Props

loop : 마지막 사진에서 다시 처음으로 돌아가게 함

timeout : 자동으로 사진을 넘기는데 걸리는 시간

controlsEnabled : 점과 버튼의 표시 여부

 

이 외에도 많은 Props들이 있다...