無限輪播圖可以說是實際在項目中用到的最多的組件腹缩，之間做過的項目一般在首頁都會有無限輪播的存在沟于。
主要思路
1. index 0 插入最后數(shù)組的最后一張圖片
2. index array.count+ 1 插入第一張圖片
3.中間順序放入數(shù)組中的元素
4.當滑動到index 0 的位置時离例，將scrollview 的偏移數(shù)組的最后一張所在的位置
5.當滑動到index array.count+ 1 的位置時荚坞，將偏移量置為數(shù)組第一張的位置
邏輯想通了虎谢，接下來就是代碼的實現(xiàn)了蚁鳖。作為一個入坑react native的人來說，把幾個關(guān)鍵點想通就可以了有梆。
1.這個肯定得考慮復用性是尖，那么得封裝成一個單獨的組件，組件怎么實現(xiàn)通信呢泥耀？
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.怎么布局饺汹？
可以先去官網(wǎng)看看scrollview 的相關(guān)屬性以及函數(shù)，這里我們需要用到他的結(jié)束拖拽的函數(shù)
onMomentumScrollEnd
因為需要監(jiān)聽scrollview的偏移量痰催。
因為布局相關(guān)的代碼比較多兜辞，這里的思路就是將image用一個單獨的函數(shù)去render，然后在scrollview中用for循環(huán)去嵌套夸溶。
_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.最后有個很小的點就是逸吵，關(guān)于公用布局代碼的問題，之前我一直不知道怎么弄：其實就是用一個數(shù)組包含兩個布局的css樣式就可以了
const styles = StyleSheet.create({
test1:{
width: 100,
height:30,
},
test2:{
backgroundColor: 'red'
}
})
使用：
<View style = {[styles.test1,styles.test2]}></View>
下面是運行的效果圖：
image.png
暫時還沒加入定時器缝裁，所以未實現(xiàn)自動輪播扫皱。剛剛?cè)肟樱Ｍ约旱囊稽c心得能幫助到其他人捷绑。
demo地址
