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