react-native实现定时器轮播图

先看下效果图

31E51FB3-0839-4FB2-BFB3-BD8EA5312FA4.png

附上代码 https://github.com/wanwang88/ReactNativeAutoTimerScroll

然后来看下应该怎么布局

render(){
      return(
        <View style={styles.container}>
          <ScrollView
              ref='scrollView'
              horizontal={true}
              showsHorizontalScrollIndicator = {false}
              pagingEnabled = {true}
              onMomentumScrollEnd = {(e)=>this.onAnimationEnd(e)}
              // 开始拖拽
              onScrollBeginDrag={this.onScrollBeginDrag}
              // 停止拖拽
              onScrollEndDrag={this.onScrollEndDrag}
              >
            {this.renderAllImage()}
          </ScrollView>

          {/*返回指示器*/}
          <View style={styles.pageViewStyle}>
            {/*返回5个圆点*/}
            {this.renderPageCircle()}
          </View>
        </View>
      )
    },
  

最外面一个view 然后里面一个scrollview显示图片和用来显示指示器的一个view

导入定时器类库

npm i react-timer-mixin --save
//项目中引入并注册
//引入：
var TimerMixin = require('react-timer-mixin');
//注册：
mixins: [TimerMixin],

初始化currentPage 和 duration

//设置固定值
    getDefaultProps(){
      return{
        //每隔1秒刷新一次
        duration:1000
      }
    },

    //设置可变的和初始值
    getInitialState(){
      return {
        currentPage:0
      }
    },

一帧滚动结束方法

onAnimationEnd(e){
      // 计算水平方向的偏移量
      var offSetX = e.nativeEvent.contentOffset.x;

      //当前的页数
      var currentPage= Math.floor(offSetX/width);
      //更新指示器，绘制ui
      this.setState({
          currentPage:currentPage
      });
      //AlertIOS.alert(" currentPage=  " +this.state.currentPage);
    }

定时器方法

startTimer(){
        var scrollView = this.refs.scrollView;
        var imgCount = ImageData.data.length;


        //添加定时器

        this.timer = this.setInterval(function(){
          var activePage = 0;
          if((this.state.currentPage+1) >= imgCount){
            activePage = 0;
            //AlertIOS.alert(" b=  " +this.state.currentPage);
          }else{
            activePage = this.state.currentPage+1;
          }

          //更新圆点状态
          this.setState({
            currentPage:activePage
          });
          //scrollView 滚动
          var scrollOffsetX = activePage * width;
          scrollView.scrollResponderScrollTo({x:scrollOffsetX,y:0,animated:false});
        },this.props.duration);
    },