React-Native 中实现图片定时器

• 效果图

  
  222.gif

• 结构

  
  Snip20160404_8.png

• 在render函数中表现为：

    render(){
        return(
             <View style={styles.container}>
                <ScrollView
                >
                {this.renderCycleImages()}
                </ScrollView>
  
                <View style = {styles.pageViewStyle}>
                {this.renderPageIndicator()}
                 </View>
            </View>
        )
     },
  

1：首先实现的效果

Snip20160404_6.png

• 导入相应的类

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

• 导入JSON数据和获取屏幕数据的类库

    import ImagesData from './component/ImageData.json';
    import Dimensions from  'Dimensions';
  

• 在 renderCycleImages函数中加载图片

  • 我是把图片放在 Images.xcassets

    renderCycleImages(){
        var datas = ImagesData.data;
        var allImages = [ ];
    
        for(var i=0; i< datas.length; i++){
            allImages.push(
          <Image 
           key={i}
           source={{uri: datas[i].img}}
           style={styles.imagesStyle}/>
      );
       }
    
       return allImages;
       }
    

  • 图片样式

    imagesStyle:{
    width:width,
    height:width * 0.5,
    },

• 在 renderPageIndicator函数中加载 图片指示器

  • 加载 图片指示器

      var allCycle =  [ ];
    
      for (var i= 0; i< ImagesData.data.length; i++){
    
      allCycle.push(
          <Text key = {i} style = {styles.pageCircleStyle}>•</Text>
      )
       }
    
      return allCycle;
       }
    

  • pageViewStyle 样式
    pageViewStyle:{
    flexDirection:'row',
    width:width,
    height:30,
    backgroundColor:'rgba(222,222,222,0.6)',

        position:'absolute',
            bottom:0,
    
            alignItems:'center',
            justifyContent:'center'
        },
    

  • 图片指示器样式

       pageCircleStyle:{
           fontSize:30,
               marginLeft:5
    },
    

• 注意：

  • 1.若不绑定( key = {i})一个唯一标识，

    
    Snip20160404_2.png

  • 2.ScrollView默认是垂直样式

      <ScrollView
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          
          >  
    

  • 3.把图片没有展示出来

      图片若没设置大小，将不显示
      还有一点：不能滑动，设置flex：1
    

2. 实现手动滚动

- 大致思路：给图片指示器添加样式。如果当前页与图片指示器的值相等，则为红色，否则为白色.

- 给定一个初始的页码
     
        getInitialState(){
            return{
                 currentPage:0
             }
        },
- 指示器中的代码表现为：
    
        renderPageIndicator(){

           var allCycle = [ ];
           var style;

            for (var i= 0; i< ImagesData.data.length; i++){
            //判断是否是当前页
            style = (i == this.state.currentPage)? {color:'red'} :{color:'white'};

            allCycle.push(
            <Text key = {i} style = {[styles.pageCircleStyle,style]}>•</Text>
        )
      }

      return allCycle;
        },

• OnMomentumScrollEnd 当一帧滚动完毕的时候调用

  • e.nativeEvent.contentOffset。拿到偏移量，进而求出当前页码，再更新当前页

      onAnimationEnd(e){
      var offSetX = e.nativeEvent.contentOffset.x;
    
         var currentPage = Math.floor(offSetX/width);
    
      // 更新状态
      this.setState({
           currentPage: currentPage
          });
      },
    

3.加入定时器

• 需要导入计时器类库 npm i react-timer-mixin --save

  • 在项目中需要引入并注册：
    • 引入： var TimerMixin = require('react-timer-mixin');
    • 注册：mixins: [TimerMixin],

• 在componentDidMount函数中开启定时器，一般网络请求，异步处理都在这个函数中处理

  • 设置一个初始值，

      getDefaultProps(){
          return{
          timer:1000
          }
      },
    

  • 开启定时器

      startTimer(){
          var scrollView = this.refs.scrollView;
          var imagesCount = ImagesData.data.length;
    
        this.timer = this.setInterval(function () {
    
       // 设置临时页码
       var activePage;
    
       if((this.state.currentPage + 1) >=imagesCount ){
              activePage = 0;
          }else{
              activePage = this.state.currentPage + 1;
          };
    
          var currentX = activePage * width;
           scrollView.scrollResponderScrollTo({x:currentX,y:0,animated:true});
    
           this.setState({
           currentPage:activePage
      });
    
      },this.props.timer)
       },
    

• 完善

  • onScrollEndDrag 停止拖拽函数中，开启定时器

  • onScrollBeginDrag 开始拖拽函数中，清除定时器

    onScrollEndDrag(){
    this.startTimer();
    },

      onScrollBeginDrag(){
    
        this.clearInterval(this.timer);
      },
    

• render函数最终表现为

    render(){
    return(
        <View style={styles.container}>
            <ScrollView
            ref = 'scrollView'
            horizontal={true}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={false}
            onMomentumScrollEnd={this.onAnimationEnd}
            onScrollEndDrag={this.onScrollEndDrag}
            onScrollBeginDrag={this.onScrollBeginDrag}
            >
                {this.renderCycleImages()}
            </ScrollView>
  
            <View style = {styles.pageViewStyle}>
                {this.renderPageIndicator()}
            </View>
        </View>
    )
  

  },