React Native－图片轮播

图片轮播在App开发中经常使用，这里图片轮播使用的是第三方组件react-native-swiper，
我们启动npm命令行，在项目的根目录使用如下命令安装模块。

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

安装好之后 开始写代码，

1，引入第三方组件

var Swiper = require('react-native-swiper');

这样我们在项目中就可以直接使用Swiper组件了。

2，准备好轮播图片的资源，

var images=[    'http://ac-c6scxa78.clouddn.com/f6b64dc4bf7bee56.jpg',    'http://ac-c6scxa78.clouddn.com/91ead58b0bb213b6.jpg',    'http://ac-c6scxa78.clouddn.com/d67316858f6c71f3.jpg',    'http://ac-c6scxa78.clouddn.com/c81c5b7be1838a1e.jpg',    'http://ac-c6scxa78.clouddn.com/54fe022399902788.jpg',];

3

render() {        return (            <Swiper height={200}                >                {this.renderImg()}            </Swiper>        );    }    renderImg(){        var imageViews=[];        for(var i=0;i<images.length;i++){            imageViews.push(                <Image                    key={i}                    style={{flex:1}}                    source={{uri:images[i]}}                    />            );        }        return imageViews;    }

效果如下：

但是我们发现原点的位置不是我们想要的，那么如何改变原点的位置 以及颜色呢？

 <Swiper height={200}     paginationStyle={{bottom:10}}     autoplay={true}     dot={<View style={{width:8,height:8,backgroundColor:'white',borderRadius:4,marginLeft:3,marginRight:3}}></View>}     activeDot={<View style={{width:8,height:8,backgroundColor:'orange',borderRadius:4,marginLeft:3,marginRight:3}}></View>}                >      {this.renderImg()} </Swiper>

paginationStyle设置点的样式，
dot和activeDot设置选中和未选中的样式

这样我们就可以将轮播点的位置设置成我们想要的效果了，
IOS

Android

还有很多比较好的样式 请参考https://github.com/leecade/react-native-swiper