04-React Native体验之轮播图scrollview

新建项目 指定React Native版本为0.44.3

react-native init scrollview --version 0.44.3

在iOS图片目录里面添加图片
把ImageData.json拷贝到项目根目录

本例需要安装定时器在项目根目录运行
npm i react-timer-mixin --save

直接上代码
index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

//取出屏幕尺寸
var Dimensions = require('Dimensions');
var screenWidth = Dimensions.get('window').width;

//引入计时器类库
var TimerMixin = require('react-timer-mixin');

//引入json数据
var ImageData = require('./ImageData.json')

var scrollview = React.createClass({

  // 注册计时器
  mixins: [TimerMixin],
  //设置固定值
  getDefaultProps(){
    return{
      // 每隔多少时间
      duration: 1000
    }
  },
  // 设置可变的和初始值
  getInitialState(){
    return{
      currentPage: 0
    }
  },
  render() {
    return (
      <View style={styles.viewStyle}>
        <View style={styles.container}>
          <ScrollView
            ref="scrollView"
            //设置滚动方向
            horizontal={true}
            // 隐藏水平滚动条
            showsHorizontalScrollIndicator={false}
            // 自动分页
            pagingEnabled={true}
            // 当一帧滚动结束
            onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
            // 开始拖拽
            onScrollBeginDrag={this.onScrollBeginDrag}
            // 停止拖拽
            onScrollEndDrag={this.onScrollEndDrag}
          >
            {this.randerAllImage()}
          </ScrollView>
          {/*返回指示器*/}
          <View style={styles.pageViewStyle}>
            {/*返回5个圆点*/}
            {this.renderPageCircel()}
          </View>
        </View>
      </View>
    );
  },
  //调用开始拖拽
  onScrollBeginDrag(){
    // 停止定时器
    this.clearInterval(this.timer);
  },
  // 实现一些复杂的操作
  componentDidMount(){
    // 开启定时器
    this.startTimer();
  },
  //调用停止拖拽
  onScrollEndDrag(){
    //开启定时器
    this.startTimer();
  },
  startTimer(){
    // 1. 拿到scrollView
    var scrollView = this.refs.scrollView;
    var imgCount = ImageData.data.length;

    // 2.添加定时器  this.timer --->可以理解成一个隐式的全局变量
    this.timer = this.setInterval(function () {
      // 2.1 设置圆点
      var activePage = 0;
      // 2.2 判断
      if((this.state.currentPage+1) >= imgCount){ // 越界
        activePage = 0;
      }else{
        activePage = this.state.currentPage+1;
      }

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

      // 2.4 让scrollView滚动起来
      var offsetX = activePage * screenWidth;
      scrollView.scrollResponderScrollTo({x:offsetX, y:0, animated:true});

    }, this.props.duration);
  },
  // 返回所有的图片
  randerAllImage(){
    // 数组
    var allImage = [];
    // 拿到图像数组
    var imgsArr = ImageData.data;
    // 遍历
    for(var i=0; i<imgsArr.length; i++){
      var imgItem = imgsArr[i];
      allImage.push(
        <Image key={i} source={{uri: imgItem.img}} style={{width:screenWidth, height:120 }}/>
      );
    }
    return allImage;
  },
  //返回所有的圆点
  renderPageCircel(){
    var indicatorArr = [];
    var style;
    //拿到图像数组
    var imgsArr = ImageData.data;
    //遍历
    for(var i=0; i<imgsArr.length; i++){
      style = (i == this.state.currentPage) ? {color: 'orange'} :  {color: '#ffffff'};
      //创建圆点装入数组
      indicatorArr.push(
        <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
      );
    }
    return indicatorArr;
  },
  //当一帧滚动结束的时候调用
  onAnimationEnd(e){
    // 1.求出水平方向的偏移量
    var offSetX = e.nativeEvent.contentOffset.x;
    // 2.求出当前的页数
    var currentPage =Math.floor(offSetX / screenWidth);
    // 3.更新状态机,重新绘制UI
    this.setState({
      //当前的页码
      currentPage:currentPage
    });
  }
});

const styles = StyleSheet.create({
  viewStyle:{
    flex:1,
    backgroundColor: '#F5FCFF'
  },
  container:{
    marginTop:20,
  },
  pageViewStyle:{
    width:screenWidth,
    height:25,
    backgroundColor:'rgba(0,0,0,0.2)',

    //定位
    position:'absolute',
    bottom: 0,

    // 设置主轴的方向
    flexDirection: 'row',
    // 设置侧轴方向的对齐方式
    alignItems: 'center'
  }
});

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

image.png image.png