圖片輪播在APP中經常會遇到，react native有實現圖片輪播的庫 react-native-swiper
使用命令行啟動npm，在根目錄下執行下面命令

$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save

安裝好之后，實現以下代碼：

//引入組件
var Swiper = require('react-native-swiper');
    render(){
        return(
            <Swiper height={200}
                 paginationStyle={{bottom:10}}
                 autoplay={true}
                 dot={this._indexView('white')}
                 activeDot={this._indexView('green')}
             >
                {this._scrollImg()}
            </Swiper>
        );
    }
    _scrollImg(){
        var imageViews=[];
        var images=[
            'http://ojm0517sf.bkt.clouddn.com/1.jpg',
            'http://ojm0517sf.bkt.clouddn.com/2.jpg',
            'http://ojm0517sf.bkt.clouddn.com/3.jpg',
            'http://ojm0517sf.bkt.clouddn.com/4.jpg'
             ];
        for(var i=0;i<images.length;i++){
            imageViews.push(
                <Image
                    key={i}
                    style={{flex:1}}
                    source={{uri:images[i]}}
                    />
            );
        }
        return imageViews;
    }
    _indexView(color){
        let view = <View style={[styles.swiperIndexView, {backgroundColor:color}]}></View>;
        return view;
    }

樣式

var styles = StyleSheet.create({
    swiperIndexView:{
        width:8,
        height:8,
        borderRadius:4,
        marginLeft:3,
        marginRight:3
    }, 
});

demo地址：https://github.com/SevenTian/reactNative-，如果滿意請點擊star
效果圖

Simulator Screen Shot 2017年1月17日 下午9.45.18.png