
react-native-swiper 解析
1.傳遞組件給swiper，作為swiper組件的children，
2.假如 有 4 張圖片需要循環播放，那么傳給swiper 4個 <Image /> （1、2、3、4）
事實上swiper組件內會對其進行一次編輯 ： 4、1、2、3、4、1
3.依次正序、橫向滑動，滑到4，然后滑到1，此時scrollview會馬上更新contentOffSet（x: y:）
即滑到 1 的時候回馬上更新 contentOffSetX 到 第一個1位置。 倒序滑動邏輯如同正序
另一種實現方案（OC上使用一切正常）
1.scrollview上放3個<Image />組件，默認顯示中間的Image組件， 左右滑動到兩邊的邊界x坐標（0，2*screenWidth）
馬上更新contentOffSetX到 screenWidth（即還是中間的Image組件）同時更新圖片
2.RN實現會有閃屏現象，因為渲染一個圖片較慢，尤其是大圖。
3.這種方式實現起來並不合適
模仿swiper簡單實現循環播放scrollview
'use strict'
import React, { Component, PropTypes } from 'React'
import {
AppRegistry,
StyleSheet,
View,
ScrollView,
Text
} from 'react-native'
export default class ImageLoopPlayer extends Component {
constructor(props) {
super(props)
let total = props.children ? props.children.length || 1 : 0
let offSetX = props.children.length > props.defaultIndex ?
(props.defaultIndex + 1) * props.componentWidth : 0
this.state = {
'total': total,
'offSetX': offSetX,
'currentIndex': props.defaultIndex,
}
}
componentWillMount() {
/**
* 組件第一次繪制之前調用。render前
* 可以更新state參數
*/
}
componentDidMount() {
/**
* 在組件第一次繪制后調用，通知組件以及加載完成。render 后
*/
}
scrollviewDidScroll(e) {
let setX = e.nativeEvent.contentOffset.x
if (setX == 0) {
this.setState({
'offSetX': this.props.componentWidth * this.state.total
})
} else if (setX == this.props.componentWidth * (this.state.total + 1)) {
this.setState({
'offSetX': this.props.componentWidth
})
}
}
scrollEndDrag(e) {
let setX = e.nativeEvent.contentOffset.x
this.setState({
'offSetX': setX
})
}
momentumScrollEnd(e) {
let setX = e.nativeEvent.contentOffset.x;
//求出當前頁數
let pageIndex = Math.floor(setX / this.props.componentWidth);
if (pageIndex == 0) {
this.setState({
'currentIndex':this.state.total-1
})
} else if (pageIndex == this.state.total+1) {
this.setState({
'currentIndex':0
})
} else {
this.setState({
'currentIndex':pageIndex - 1
})
}
}
renderPageControl() {
let pageArray = [];
let colorStyle;
for (let i = 0; i < this.state.total; i++) {
colorStyle = (i == this.state.currentIndex) ? {color:'red'} : {color:'white'}
pageArray.push(
<Text key = {i} style = {[{fontSize:30}, colorStyle]}>
•
</Text>
);
}
return pageArray;
}
render() {
let pages = []
if (this.state.total > 1) {
/** children 可以理解為組件上面所有子組件 (如下：Text、Image就可理解為children)
* <View>
* <Text></Text>
* <Image></Image>
* </View>
*/
// Object.keys() 返回對象的可列舉屬性或方法
pages = Object.keys(this.props.children) // 0，1，2，3
pages.unshift(this.state.total - 1 + '') // 首位插入 （total-1）===>>> 3，0，1，2，3
pages.push('0') // 末尾追加 '0' ===>>> 3，0，1，2，3，0
pages = pages.map((page, i) => {
return <View style={{width: this.props.componentWidth,height: this.props.componentHeight}}
key={i}>
{this.props.children[page]}
</View>
})
}
return (
<View style = {{position: 'relative', width: this.props.componentWidth,height: this.props.componentHeight}}>
<ScrollView ref = 'scrollView'
backgroundColor = 'black'
contentContainerStyle = {{flexDirection:'row',height:this.props.componentHeight}}
showsHorizontalScrollIndicator = {true}
horizontal={true} // 所有的的子視圖會在水平方向上排成一行,默認值為false。
pagingEnabled = {true}
keyboardDismissMode = {'on-drag'} // 當拖拽開始的時候隱藏軟鍵盤
keyboardShouldPersistTaps = {false} // 當此屬性為false的時候，點擊焦點文本輸入框以外的地方，鍵盤就會隱藏。
iosautomaticallyAdjustContentInsets = {false} // 與OC呼應，頂部莫名出現白色區域
contentOffset = {{x:this.state.offSetX, y:0}}
scrollsToTop = {false} // 點擊狀態欄滾動到頂部
scrollEventThrottle = {16} // 與 onScroll 方法搭配使用（系統提示建議16）
onScroll = {(e)=>this.scrollviewDidScroll(e)}
onScrollEndDrag = {(e) => this.scrollEndDrag(e)}
onMomentumScrollEnd = {(e)=>this.momentumScrollEnd(e)}>
{pages}
</ScrollView>
<View style={{position: 'absolute',
bottom: 30,
left: 0,
right: 0,
flexDirection: 'row',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
}}>
{this.renderPageControl()}
</View>
</View>
)
}
}
AppRegistry.registerComponent('ImageLoopPlayer', () => ImageLoopPlayer)