圖片輪播在APP中經(jīng)常會(huì)遇到，react native有實(shí)現(xiàn)圖片輪播的庫 react-native-swiper
使用命令行啟動(dòng)npm，在根目錄下執(zhí)行下面命令
$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save
安裝好之后，實(shí)現(xiàn)以下代碼：
//引入組件
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-，如果滿意請(qǐng)點(diǎn)擊star
效果圖
Simulator Screen Shot 2017年1月17日 下午9.45.18.png
