React native 图片轮播实现

图片轮播在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