react-native 轮播图

找的资料，缺陷就是现在手滑动的时候焦点不动，不是无缝滚动

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Button,
    TouchableWithoutFeedback,
    ScrollView,
    Animated,
    // Component,
} from 'react-native';
import Dimensions from 'Dimensions';
var screenWidth=Dimensions.get('window').width;
export default class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            images:['#dfe24a','#68eaf9','#ef9af9'],
            selectedImageIndex:0,
            isNeedRun:true,
        };
        this._index=0;//当前正在显示的图片
        this._max=this.state.images.length;//图片总数
    }
  render() {
      var _scrollView=ScrollView;
      //图片列表
      let images=this.state.images.map((value,i)=>{
          return (
             <TouchableWithoutFeedback>
                <View style={{width:screenWidth,height:120,backgroundColor:value}}></View>
             </TouchableWithoutFeedback>
          );
      });
  //    小圆点指示器
      let circles=this.state.images.map((value,i)=>{
          return (<View key={i} style={(i==this.state.selectedImageIndex)?styles.circleSelected:styles.circle}/>)
      });
  //    小圆点位置显示
      let imageLength=this.state.images.length;
      let circleLength=6*imageLength+5*2*imageLength;
      let center=(screenWidth-circleLength)/2;
      return(
          <View style={styles.container}>
              <ScrollView  horizontal={true}
              showsHorizontalScrollIndicator={true}
              showsVerticalScrollIndicator={true}
              onTouchStart={()=>this._onTouchStart()}
              onTouchMove={()=>console.log('onTouchMove')}
              onTouchEnd={()=>this._onTouchEnd()}
              onScrollBeginDrag={()=>clearInterval(this._timer)}
              onScrollEndDrag={()=>this._runFocusImage()}
              pagingEnabled={true}
              ref={(scrollView)=>{this._scrollView=scrollView;}}>
              <Animated.View style={{flexDirection:'row'}}>{images}</Animated.View>
              </ScrollView>
              <View style={{flexDirection:'row',position:'absolute',top:100,left:center}}>{circles}</View>
          </View>

      );
  }
    //当手机按到scrollview时停止定时任务
    _onTouchStart(){
        clearInterval(this._timer);
    }
    _onTouchEnd(){
    //    先滑动到指定index位置，再开启定时任务
        this._scrollView.scrollTo({x:this._index*screenWidth});
    //    重置小圆点提示器
        this._refreshFocusIndicator();
        this._runFocusImage();
    }
    // _onScroll(){
    //     // this._contentOffsetX=;
    //     this._index=Math.round(this._scrollView.contentOffset.x/screenWidth);
    // }
    _runFocusImage(){
        if(this._max<=1){
            return;
        }
        this._timer=setInterval(function () {
            this._index++;
            if(this._index>=this._max){
                this._index=0;
            }
            this._scrollView.scrollTo({x:this._index*screenWidth},true);
        //    重置小圆点指示器
            this._refreshFocusIndicator();
        }.bind(this),2000);
    }
    _refreshFocusIndicator(){
        this.setState({selectedImageIndex:this._index});
    }
//    组件加载完成
    componentDidMount() {
        this._runFocusImage();
    }
//    组件即将卸载
    componentWillUnmount() {
        clearInterval(this._timer);
    }
//    组件接收到新属性
    componentWillReceiveProps(nextProps) {

    }


}
const styles = {
    container: {
        flex:1,
        flexDirection:'row',
    },
    circleContainer: {
        position:'absolute',
        left:0,
        top:120,
    },
    circle: {
        width:6,
        height:6,
        borderRadius:6,
        backgroundColor:'#f4797e',
        marginHorizontal:5,
    },
    circleSelected: {
        width:6,
        height:6,
        borderRadius:6,
        backgroundColor:'#ffffff',
        marginHorizontal:5,
    }
};
Login.defaultProps={
    isNeedRun:true,
};
Login.propTypes={
    // isNeedRun:PropTypes.bool,
    // onItemClick:PropTypes.func,
};
AppRegistry.registerComponent('Login', () => Login);