react native scrollView定时器广告位-白红宇

大家好！今天又是个愉快的周五！ ###实现的效果 github地址:

之前学过的知识点今天一点点补回来，使用中才会知道有多少坑等着你，现在总结下最近有关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(            
                    
     
      this._annimationEnd(e)}                            onScrollBeginDrag = {()=>this._onBeginDrag()}                            onScrollEndDrag={()=>this._onEndDrag()}>                    {this._renderContent()}                
                     
     
                          {this._renderPagingIndicator()}                
                 
            )    }    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(                
                        
                     
                )        }        return items;    }    _renderPagingIndicator(){        var indicators  = [];        for (var i=0;i
    
     •            )        }        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;复制代码