RN实现图片轮播

最近研究RN，对于我这个新手网上资料坑的一笔啊！！！ES5的旧资料在ES6 上各种错误，今天做了个最简单的轮播图，记录一下。有问题的地方还请大神们赐教！

我现在学习用的是vscode + android studio + xcode 如果大家有好用的软件或者插件欢迎大家评论给我 ，RN小白不胜感激。

imgData.json

    {
      "data":[
        {
          "img":"img_01",
          "title":"你那一笑倾城倾国"
        },{
          "img":"img_02",
          "title":"那里记录了最唯美的爱情故事"
        },{
          "img":"img_03",
          "title":"我怎么是一个剩女"
        },{
          "img":"img_04",
          "title":"生命中的最后四分钟"
        },{
          "img":"img_05",
          "title":"我们都需要治疗"
        }
      ]
    }

App.js

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

    import ImgData from './imgData.json';
    var {width,height} = Dimensions.get('window')


    export default class HelloWorldApp extends Component {
      

      static defaultProps = {

        //多少时间刷新一次
        duration:5000

      };

      constructor(props){
        super(props);

        this.state = {
          content:'',
          //当前页码
          currentPage:0
        }
        this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this);
        this.onScrollEndDrag = this.onScrollEndDrag.bind(this);
        this.onAnimationEnd = this.onAnimationEnd.bind(this);
        this.timerScroll = this.timerScroll.bind(this);
      }
      //组件安装 在render之后调用一次 实现复杂的操作
      componentDidMount(){

        //开启定时器
        this.startTimer()
        

      }
      //开启定时器
      startTimer(){


        //2.添加定时器
        this.timerInterval = setInterval(
          ()=>{
            console.log('定时器开启')
            
            this.timerScroll();
            
          },this.props.duration);
      }
      //定时器滚动的处理
      timerScroll(){

        //0.拿到轮播视图scrollview
        var scrollview = this.refs.scrollView;
        
        var data = ImgData.data;

        //1设置圆点
        var activePage ;
        //2判断
        var  currentPage =  this.state.currentPage + 1
        if (currentPage >= data.length){
          activePage = 0
        }else{
          activePage = currentPage
        }
        //3更新状态机
        this.setState({
          currentPage:activePage,
          content:data[activePage].title
        })

        //4.滚动滚动视图
        var currentX = activePage * width
        scrollview.scrollTo({x: currentX,animated:true})
        scrollview.scrollResponderScrollTo


      }

      //组件即将卸载
      componentWillUnmount(){

        this.timerInterval && clearTimeout(this.timerInterval)
      }


      render() {
        
        return (
          <View style = {styles.container}>
            <ScrollView 
            ref = 'scrollView'
            horizontal={true}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={false}
            //开始拖拽
            onScrollBeginDrag = {this.onScrollBeginDrag}
            //结束拖拽
            onScrollEndDrag = {this.onScrollEndDrag}
            //当一帧滚动结束
            onMomentumScrollEnd = {(e)=>this.onAnimationEnd(e)}
            >

              {this.renderAllImage()}

            </ScrollView>
            <View style={styles.pageViewStyle}>
              {/* 返回五个圆点 */}
              {this.renderPageCircle()}
            </View>

            {/* <Text>定时器示例：</Text>
            <Text>{this.state.content}</Text>
            <Text>{this.state.msg}</Text> */}
          </View>
        );
      }


      //返回图片
      renderAllImage(){

        var allImage = []; 
        var imgArr = ImgData.data;
        for(var i = 0; i < imgArr.length; i++){
          
          var imgItem = imgArr[i]
          allImage.push(

            <Image key = {i}  source={{uri:imgItem.img}} style= {styles.imgStyle}/>

          )

        }
        return allImage;
      }
      //返回圆点
      renderPageCircle(){

        var allCircle = []; 
        var imgArr = ImgData.data;

        var tyle;

        for(var i = 0; i < imgArr.length; i++){

          //判断
          style = ( i== this.state.currentPage )? {color:'orange'} : {color:'white'}
          
          var imgItem = imgArr[i]
          allCircle.push(
      
            <Text key = {i+100} style= {[styles.circleStyle,style]}>&bull;</Text>
          )

        }
        allCircle.push(
            
          <Text>{this.state.content}</Text>
        )
        return allCircle;
      }
      //开始拖拽
      onScrollBeginDrag(){
        //计时器停止
        this.timerInterval && clearTimeout(this.timerInterval)

      }
      //结束拖拽
      onScrollEndDrag(){
        //计时器开启
        this.startTimer()
      }
      //当一帧滚动结束的时候调用
      onAnimationEnd(e){
        // 获取滑动的偏移量
        var offSetX = e.nativeEvent.contentOffset.x;

        // 通过偏移量和屏幕宽度计算第几页
        var currentPage = Math.floor(offSetX/width);


        //  更新值已获取屏幕更新
        this.setState({
          currentPage:currentPage,
          content:ImgData.data[currentPage].title
        })


      }

    }

    const styles = StyleSheet.create({
      container:{

        marginTop:25,
      
      },
      imgStyle:{
        width:width,
        height:120,
      },
      pageViewStyle:{
        width:width,
        height:25,
        backgroundColor:'rgba(241,241,241,0.9)',
        //定位
        position:'absolute',
        bottom:0,
        //设置主轴的方向
        flexDirection:'row',
        //设置侧轴方向的对齐方式
        alignItems:'center',
      },
      circleStyle:{
        fontSize:25,
      },
    })

屏幕快照 2018-04-11 17.32.39.png