React Native 之ScrollView

import React, { Component } from 'react'
import { Text, StyleSheet, View, Button ,TouchableOpacity,Alert,ScrollView,Image} from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation';


let Dimensions = require('Dimensions');
let {width, height} = Dimensions.get('window');

export default class HomeScreen extends Component {
  static navigationOptions = {
    title: 'HomeScreen'
  }

  //defaultProps
  static defaultProps = {
      //每隔多少秒执行一次
      duration:2000
  }

  componentDidMount(){
    // 开启定时器
    this.startTime();
  }

  // 开启定时器
  startTime(){
        // 1.拿到scrollerView
        let scrollerView = this.refs.scrollerView;
        let imageCount = 4;
        // 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);
    }

  constructor(props){
    super(props);
    this.state = {
      currentPage:0
    }
    this.renderPageIndex = this.renderPageIndex.bind(this);
  }

  renderChildView(){
    var allChild = [];
    var imgNames = [require('./img/leading_01.png'),
                    require('./img/leading_02.png'),
                    require('./img/leading_03.png'),
                    require('./img/leading_04.png')];
    imgNames.forEach((item,index)=>{

      allChild.push(
        <Image
        style={{width: 375,height: 375}}
        source={item}
        />
      )
    })
    return allChild;
  }

  // 返回页面指示器的圆点
  renderPageIndex(){
        // 数组
        let indicatorArr = [];
        //拿到图形数组
        //let imageArrs = ImageData.data;
        //样式
        var style;
        //遍历
        for (var i = 0; i < 4; i++){
            // 判断
            style = (i==this.state.currentPage) ? {color: 'orange'} : {color: '#E8E8E8'}

            //放入圆点
            indicatorArr.push(
                // 多个样式使用[]数组来放
                <Text key={i} style={[{fontSize:25}, style]}>•</Text>
            );
        }
        //返回
        return indicatorArr;
    }

  // 当一帧滚动结束的时候调用
  onAnimationEnd(e){
      // 1.求出水平方向的偏移量
      var offsetX = e.nativeEvent.contentOffset.x;

      // 2.求出当前的页数         floor函数 取整
      var currentPage = Math.floor(offsetX / width);

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

  }

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

  render(){
    return(
      <View style={styles.circulateViewStyle}>
        <ScrollView
        ref="scrollerView"
        horizontal={true}
        pagingEnabled={true}
        scrollEnabled={true}
        //滚动动画结束时调用此函数
        onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
        //开始拖拽
        onScrollBeginDrag={(e)=>this.onScrollerBeginDrag(e)}
        //停止拖拽
        onScrollEndDrag={(e)=>this.onScrollEndDrag(e)}
        >

          {this.renderChildView()}
        </ScrollView>
        {/*底部页面指示器*/}
        <View style={styles.pageViewStyle}>
            {/*返回5个圆点*/}
            {this.renderPageIndex()}
        </View>

      </View>

    );
  }

const styles = StyleSheet.create({

    circulateViewStyle: {

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

    },

    imageStyle: {
        width: width,
        height: 150
    },
    pageViewStyle: {
        width:width,
        height:25,
        backgroundColor:'rgba(0, 0, 0, 0.4)',
        position:'absolute',
        bottom:0,
        flexDirection:'row',
        alignItems:'center'
    }
});