无限轮播图可以说是实际在项目中用到的最多的组件，之间做过的项目一般在首页都会有无限轮播的存在。
主要思路
1. index 0 插入最后数组的最后一张图片
2. index array.count+ 1 插入第一张图片
3.中间顺序放入数组中的元素
4.当滑动到index 0 的位置时，将scrollview 的偏移数组的最后一张所在的位置
5.当滑动到index array.count+ 1 的位置时，将偏移量置为数组第一张的位置
逻辑想通了，接下来就是代码的实现了。作为一个入坑react native的人来说，把几个关键点想通就可以了。
1.这个肯定得考虑复用性，那么得封装成一个单独的组件，组件怎么实现通信呢？
props
constructor(props){
super(props);
}
const imageUrls = this.props.imageUrls;
传值：
import ViewPager from './component/viewpage'
const imageUrls = ['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=760528960,2729756840&fm=26&gp=0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558514797592&di=b7404ddc598d9e395f33f36ef883ebf4&imgtype=0&src=http%3A%2F%2Fc4.haibao.cn%2Fimg%2F600_0_100_0%2F1530690356.3493%2F81eaeb56a5255d33fdb280712f3b252d.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558514797592&di=4fc04bc668b9a3ec1e1e75208aeb4b43&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977a600eedebb51f8198618e31c.jpg'];
<ViewPager imageUrls ={imageUrls}/>
这就是一个简单的传值
2.怎么布局？
可以先去官网看看scrollview 的相关属性以及函数，这里我们需要用到他的结束拖拽的函数
onMomentumScrollEnd
因为需要监听scrollview的偏移量。
因为布局相关的代码比较多，这里的思路就是将image用一个单独的函数去render，然后在scrollview中用for循环去嵌套。
_renderPagerItem(url ,key){
console.log('render item complete');
return(
<View key = {key} style = {{flex: 1,flexDirection:'row'}}>
<Image source = {{uri : url}} style = {styles.image}/>
</View>
)
}
render image
按之前说过的插入顺序进行插入：
_renderPager(){
const imageUrls = this.props.imageUrls;
if(imageUrls == null || imageUrls.length == 0){
return null
}
let count = imageUrls.length
let pagers = []
if(count == 1){
pagers.push(this._renderPagerItem(imageUrls[0],0))
}else{
//将最后一张插入到index为0 的位置
pagers.push(this._renderPagerItem(imageUrls[count -1],0))
//依次插入
for(let i = 0 ; i< count; i++){
pagers.push(this._renderPagerItem(imageUrls[i],i+1))
}
//将第一张插入到最后一个位置
pagers.push(this._renderPagerItem(imageUrls[0],count + 1))
}
console.log('render pagers complete')
return pagers
}
3.最后有个很小的点就是，关于公用布局代码的问题，之前我一直不知道怎么弄：其实就是用一个数组包含两个布局的css样式就可以了
const styles = StyleSheet.create({
test1:{
width: 100,
height:30,
},
test2:{
backgroundColor: 'red'
}
})
使用：
<View style = {[styles.test1,styles.test2]}></View>
下面是运行的效果图：
image.png
暂时还没加入定时器，所以未实现自动轮播。刚刚入坑，希望自己的一点心得能帮助到其他人。
demo地址
