react-native scrollView定时器广告位

大家好！今天又是个愉快的周五！

实现的效果

github地址: https://github.com/yukuifang/KyReactApp.git

1509697628376.jpg

之前学过的知识点今天一点点补回来，使用中才会知道有多少坑等着你，现在总结下最近有关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上进行测试，测试的结果如下：

image

由上图可以看出执行的顺序，

首先是按下屏幕时触发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]}>&bull;</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;