ScrollView组件的基本使用

下面代码是在ES6语法，实现图片的播放，但拖到时停止（onScrollBeginDrag）和停止拖动（onScrollEndDrag）后继续播放会出现问题，做个记录，也请大神指点一下。

import React, {Fragment,Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import defaults from "@babel/runtime/helpers/esm/defaults";

const Dimensions = require('Dimensions');
const {width} = Dimensions.get('window');

//引入json数据
let ImageData = require('./ImageData.json');


export default class App extends Component{

  static defaultProps = {
    duration:1000
  };

  constructor(props) {
    super(props);
    this.state = {
      currentPage:0
    }
  }

  render(){
    return (
        <Fragment>
          <View style={styles.container}>
            <ScrollView
                ref="scrollView"
                horizontal={true}
                //隐藏水平滚动条
                showsHorizontalScrollIndicator ={false}
                //自动分页
                pagingEnabled={true}
                //当一帧滚动结束
                onMomentumScrollEnd={(e)=>this.onAnmationEnd(e)}
                //开始拖拽
                onScrollBeginDrag={this.onScrollBeginDrag}
                //停止拖拽
                onScrollEndDrag={this.onScrollEndDrag}
            >
              {this.renderAllImage()}
            </ScrollView>
            {/*返回指示器*/}
            <View style={styles.pageViewStyle}>
              {/*返回5个圆点*/}
              {this.renderPageCircle()}
            </View>
          </View>
        </Fragment>
    );
  }

  onScrollBeginDrag(){
    //停止定时器
    //this.timer && clearInterval(this.timer);
  }

  onScrollEndDrag(){
    //开启定时器
    // this.startTimer();
  }
  //实现一些复杂的操作
  componentDidMount() {
    //开启定时器
    this.startTimer();
  }

  componentWillUnmount() {
    this.timer && clearInterval(this.timer);
  }

  //开启定时器
  startTimer(){
    //1.拿到scrollView
    let scrollView = this.refs.scrollView;
    let imgCount = ImageData.data.length;

    //2.添加定时器 this.timer -->可以理解成一个隐式的全局变量
    this.timer = setInterval(()=>{
      //2.1 设置圆点
      let activePage = 0;
      //2.2 判断
      if ((this.state.currentPage + 1)>=imgCount){//越界
        activePage = 0;
      }else {
        activePage = this.state.currentPage + 1;
      }

      //2.3 更新状态机
      this.setState({
        currentPage:activePage
      })

      //2.4 让scrollView滚动起来
      let offsetX = activePage * width;
      scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true});

    },this.props.duration);
  }

  //当一帧滚动结束的时候调用
  onAnmationEnd(e){
    //1.求出水平方向的偏移量
    let offSetX = e.nativeEvent.contentOffset.x;

    //2.求出当前的页数
    let currentPage = Math.floor( offSetX / width);
    console.log(currentPage);

    //3.更新状态机，重新绘制UI
    this.setState({
      //当前的页面
      currentPage:currentPage
    })
  }

  //返回所有的图片
  renderAllImage(){
    //数组
    let allImage = [];
    //拿到图像数组
    let imgsArr = ImageData.data;
    //遍历
    for(let i=0;i<imgsArr.length;i++){
      //取出单独的每一个对象
      var imgItem = imgsArr[i];
      //创建组件装入数组
      allImage.push(
          <Image key={i} source={{uri:imgItem.img}} style={{width:width,height:120}}/>
      )
    }
    //返回数组
    return allImage;
  }

  //返回所有的圆点
  renderPageCircle(){
    //定义一个数组放置所有的圆点
    let indicatorArr = [];
    let style;
    //拿到图像数组
    let imgsArr = ImageData.data;
    //遍历
    for (let i=0;i<imgsArr.length;i++){
      //判断
      style = (i==this.state.currentPage) ? {color:'orange'} :{color: '#ffffff'};
      //把圆点装入数组
      indicatorArr.push(
          <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
      )
    }
    return indicatorArr;
  }
};


const styles = StyleSheet.create({
  container: {
    marginTop: 25
  },
  pageViewStyle:{
    width:width,
    height:25,
    backgroundColor: 'rgba(0,0,0,0.4)',

    //定位
    position:'absolute',
    bottom:0,

    //设置主轴的方向
    flexDirection:'row',
    //设置侧轴方向的对齐方式
    alignItems:'center'
  }
});