2019-01-24

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

} from 'react-native';

//引入数据
let Dimensions = require('Dimensions');
let {width, height} = Dimensions.get('window');

export default class CirculateView extends Component {

// 常量
// props
//
// ES6中需要用在constructor中有super(props)来传递props。
// ES6中getDefaultProps是class的属性而不是方法，不能定义在组件内部，需要单独写在外面。
// 同理，ES6中propTypes也需要写在外面。
//defaultProps
static defaultProps = {

    //每隔多少秒执行一次
    duration:2000
}


//设置可变值和初始值
// getInitialState(){  //ES5模式
//     return {
//         // 当前页
//         currentPage: 0
//     }
// }
constructor(props) { // 构造函数
    super(props);
    //ES6模式
    this.state = {
        currentPage: 0
    };

}
// 开始拖拽时调用
onScrollerBeginDrag(){
    // 停止定时器
    clearInterval(this.timer);
}

// 停止拖拽时调用
onScrollEndDrag(){
    // 开启定时器
    this.startTime();

}

   // 当一帧滚动结束的时候调用
onAnimationEnd(e){
    // 1.求出水平方向的偏移量
    var offsetX = e.nativeEvent.contentOffset.x;
    // 2.求出当前的页数         floor函数 取整
    let currentP = Math.floor(offsetX / width);

    // 3.更新状态机
    this.setState({
        // 当前页
        currentPage: currentP
    })

}


// 复杂操作
componentDidMount() {
// debugger
    // 开启定时器
    this.startTime();

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

    // 1.拿到scrollerView
    let scrollerView = this.scrollerView;

    let imageCount = 5;

    // 2.添加定时器
    // 2.1 设置圆点
    let activePage = 0;

    this.timer = setInterval(() => {

        // 2.2 判断
        if((this.state.currentPage+1) >= imageCount){

            activePage = 0;
        }else {
            activePage = this.state.currentPage+1;
        }

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

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


    }, this.props.duration);

}

render(){
    return(
        <View style={styles.circulateViewStyle}>
            <ScrollView ref={(grid) => {this.scrollerView = grid}}
                        style={styles.scrollViewStyle}
                        // 水平滚动
                        horizontal={true}
                        // 是否显示水平滚动条
                        showsHorizontalScrollIndicator={false}
                        // 安页滚动
                        pagingEnabled={true}

                        //滚动动画结束时调用此函数
                        onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}

                        //开始拖拽
                        onScrollBeginDrag={(e)=>this.onScrollerBeginDrag(e)}

                        //停止拖拽
                        onScrollEndDrag={(e)=>this.onScrollEndDrag(e)}
            >

               <Image source={require('./1.png')} style={styles.imageStyle} />
               <Image source={require('./2.png')} style={styles.imageStyle} />
               <Image source={require('./3.png')} style={styles.imageStyle} />
               <Image source={require('./4.png')} style={styles.imageStyle} />
               <Image source={require('./5.png')} style={styles.imageStyle} />

            </ScrollView>

        </View>
    );
} 

}

const styles = StyleSheet.create({

circulateViewStyle: {

    marginTop:20,
    height:150,
    width:width,
},
scrollViewStyle:{
  flex:1
},

imageStyle: {
    width: width,
    height: 150
},

});