react - native 학습 의 scrollView

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView
} from 'react-native';
var Images = require('./images.json');
import Dimensions from 'Dimensions';
import TimerMixin from 'react-timer-mixin';
var width = Dimensions.get('window').width;
var ScrollViewProject = React.createClass({
  mixins:[TimerMixin],
  getInitialState() {
    return {
      currentPage:0
    }
  },
  render() {
    return(
      
        {/*  */}
        this.changeIndicators(e)}
          onScrollBeginDrag={this.onScrollBeginDrag}
          onScrollEndDrag={this.onScrollEndDrag}
          >
          {this.renderAllImage()}
        
        {/*     */}
        
          {this.renderIndicator()}
        
      
    );
  },
  componentDidMount() {
    // this.setInterval(
    //   ()=>console.log('testTimeout'),1000
    // );
    //      
    this.startTimer();
  },
  renderAllImage() {
    var allImgs = [];
    var imgData = Images.data;
    var srcs = [
      require("./imgs/a.jpg"),
      require("./imgs/b.jpg"),
      require("./imgs/c.jpg"),
      require("./imgs/d.jpg"),
      require("./imgs/e.jpg")
    ];

    for(let i=0;i
      )
    }
    return allImgs;
  },
  renderIndicator() {
    var indicators = [];
    for(let i=0;i<5;i++) {
      let style = (i==this.state.currentPage)?{color:'#ffff00'}:{color:'#ffffff'}
      indicators.push(
        •
      )
    }
    return indicators;
  },
  changeIndicators(e) {
    var offsetX = e.nativeEvent.contentOffset.x;
    this.setState({
      currentPage:Math.floor(offsetX/width)
    })
  },
  //         
  startTimer() {
    // 1.   scrollView
    var scrollView = this.refs.scrollView;
    // 2.      
    this.timer = this.setInterval(()=>{
      // console.log('haha');
      // 2.1     
      var activePage;
      // 2.2   
      if(this.state.currentPage+1 >=5) activePage=0;
      else activePage=this.state.currentPage+1;
      // 2.3     
      this.setState({
        currentPage:activePage
      })
      // 2.4  scroll    
      var offsetX = activePage * width;
      scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true});
    },1000);
  },
  //           
  onScrollBeginDrag() {
    this.clearInterval(this.timer);
  },
  //           
  onScrollEndDrag() {
    this.startTimer();
  }
});

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    // marginTop:20
  },
  indicators: {
    flexDirection:'row',
    backgroundColor:'rgba(0,0,0,0.1)',
    height:30,
    width:width,
    alignItems:'center',
    marginTop:-30
  }
});

AppRegistry.registerComponent('ScrollViewProject', () => ScrollViewProject);