大家好！今天又是个愉快的周五！
实现的效果
github地址: https://github.com/yukuifang/KyReactApp.git
之前学过的知识点今天一点点补回来，使用中才会知道有多少坑等着你，现在总结下最近有关ScrollView的使用的知识点。
属性
contentContainerStyle
这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。PS:ScrollView组件的属性不能用style来设置。
几个已知的滑动或者滑动开始结束的方法：
onScroll：在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scrollEventThrottle属性来控制.
onMomentumScrollEnd：当一帧滚动完毕时调用.
onScrollAnimationEnd ：ios上的当滚动动画结束时调用.
2、还有其他的一些事件如下，触摸事件里面有携带event，大家可以再下面的方法里面更改一些view操作就可以打印出来这些event携带的信息了
1、onScrollBeginDrag：一个子view滑动开始拖动开始时触发，注意和onMomentumScrollBegin的区别
2、onScrollEndDrag：一个子view滚动结束拖拽时触发，注意和onMomentumScrollEnd的区别
3、onTouchStart：按下屏幕时触发
4、onTouchMove：移动手指时触发
5、onTouchEnd：手指离开屏幕触摸结束时触发
6、onMomentumScrollBegin：当一帧滚动开始时调用.
7、onMomentumScrollEnd：当一帧滚动完毕时调用.
8、onStartShouldSetResponder：触摸开始时是否成为响应者
9、onStartShouldSetResponderCapture：防止子视图在触摸开始时成为应答器
10、onScrollShouldSetResponder：滚动时是否成为响应者
11、onResponderGrant：开始响应时触发
12、onResponderRelease：手指释放后，视图成为响应者
13、onResponderReject：响应拒绝
14、onScroll：滚动时触发，会触发多次
3、下面就这些方法的顺序做个简单的介绍：
首先在ios上进行测试，测试的结果如下：
由上图可以看出执行的顺序，
首先是按下屏幕时触发onTouchStart，
然后手指移动触发onTouchMove，会调用一次或者多次，
如果左右滑动，滑动开始拖动触发onScrollBeginDrag，View开始变化，View成为响应者，
然后onScroll … onTouchMove这两个会触摸多次，
然后手指离开屏幕触发onResponderRelease，
接着触摸结束onTouchEnd
然后是滑动结束拖拽时触发onScrollEndDrag，接着就是一帧滚动的开始onMomentumScrollBegin，它的起始位置和onScrollEndDrag的结束位置重合；
然后是滚动滚动onScroll，
然后是一帧滚动的结束onMomentumScrollEnd，
最后偶尔还会滚动下onScroll，这个有时间不出来，我觉得跟有抖动一样
大家可以自己测试下哦
附上源码:
import React,{Component} from 'react';
import{
AppRegistry,
StyleSheet,
View,
Image,
Text,
ScrollView
}from 'react-native';
let { width,height} = require('Dimensions').get('window');
let data = require('../Resource/scrollView/ImageData.json');
let TimerMixin = require('react-timer-mixin');
class KyScrollView extends Component{
constructor(props){
super(props);
mixins: [TimerMixin]
this.state = {
dataList:data.data,
currentPage:0
}
}
render(){
return(
<View style={styles.container}>
<ScrollView ref='scrollViewRef' contentContainerStyle={styles.scollViewStyle}
horizontal={true}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
pagingEnabled={true}
bounces={false}
onMomentumScrollEnd={(e)=>this._annimationEnd(e)}
onScrollBeginDrag = {()=>this._onBeginDrag()}
onScrollEndDrag={()=>this._onEndDrag()}>
{this._renderContent()}
</ScrollView>
<View style={styles.indicatorContentStyle}>
{this._renderPagingIndicator()}
</View>
</View>
)
}
componentDidMount(){
this._startTimer();
}
componentWillUnmount(){
clearInterval(this.timer);
}
_onBeginDrag(){
this._startTimer();
}
_onEndDrag(){
clearInterval(this.timer);
}
_startTimer(){
let maxCount = this.state.dataList.length;
let scrollView = this.refs.scrollViewRef;
let that = this;
this.timer = setInterval(function () {
if(that.state.currentPage < maxCount-1){
that.setState({
currentPage : that.state.currentPage + 1
});
}else {
that.setState({
currentPage : 0
});
}
scrollView.scrollResponderScrollTo({
x:that.state.currentPage * width,
y:0,
animated:true
});
},that.props.duration);
}
_renderContent(){
var items = [];
for (var i =0 ; i < this.state.dataList.length;i++){
let imageData = this.state.dataList[i];
items.push(
<View key={i}>
<Image source={{uri:imageData.img}} style={{height:200,width:width}}></Image>
</View>
)
}
return items;
}
_renderPagingIndicator(){
var indicators = [];
for (var i=0;i<this.state.dataList.length;i++){
let style = this.state.currentPage == i ? {color:'orange'} : {color:'#FFFFFF'};
indicators.push(
<Text key={i} style={[{fontSize:25},style]}>•</Text>
)
}
return indicators;
}
_annimationEnd(e){
let offsetX = e.nativeEvent.contentOffset.x;
this.setState({
currentPage:offsetX / width
})
}
}
KyScrollView.properties = {
currentPage:React.PropTypes.int
}
KyScrollView.defaultProps = {
duration:1000
}
const styles = StyleSheet.create({
container:{
// backgroundColor:'red',
position:'relative'
},
scollViewStyle:{
backgroundColor:'black'
},
indicatorContentStyle:{
height:20,
backgroundColor:'rgba(0,0,0,0.2)',
position:'absolute',
bottom:2,
left:0,
right:0,
flexDirection:'row',
alignItems:'center'
}
});
module.exports =KyScrollView;
