• 效果圖

  
  
  222.gif

• 結(jié)構(gòu)

  
  
  Snip20160404_8.png

• 在render函數(shù)中表現(xiàn)為：

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

1：首先實現(xiàn)的效果

Snip20160404_6.png

• 導入相應(yīng)的類

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

• 導入JSON數(shù)據(jù)和獲取屏幕數(shù)據(jù)的類庫

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

• 在 renderCycleImages函數(shù)中加載圖片

  • 我是把圖片放在 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函數(shù)中加載 圖片指示器

  • 加載 圖片指示器

      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.把圖片沒有展示出來

      圖片若沒設(shè)置大小，將不顯示
      還有一點：不能滑動，設(shè)置flex：1
    

2. 實現(xiàn)手動滾動

- 大致思路：給圖片指示器添加樣式。如果當前頁與圖片指示器的值相等，則為紅色，否則為白色.

- 給定一個初始的頁碼
     
        getInitialState(){
            return{
                 currentPage:0
             }
        },
- 指示器中的代碼表現(xiàn)為：
    
        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 當一幀滾動完畢的時候調(diào)用

  • e.nativeEvent.contentOffset。拿到偏移量，進而求出當前頁碼，再更新當前頁

      onAnimationEnd(e){
      var offSetX = e.nativeEvent.contentOffset.x;
    
         var currentPage = Math.floor(offSetX/width);
    
      // 更新狀態(tài)
      this.setState({
           currentPage: currentPage
          });
      },
    

3.加入定時器

• 需要導入計時器類庫 npm i react-timer-mixin --save

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

• 在componentDidMount函數(shù)中開啟定時器，一般網(wǎng)絡(luò)請求，異步處理都在這個函數(shù)中處理

  • 設(shè)置一個初始值，

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

  • 開啟定時器

      startTimer(){
          var scrollView = this.refs.scrollView;
          var imagesCount = ImagesData.data.length;
    
        this.timer = this.setInterval(function () {
    
       // 設(shè)置臨時頁碼
       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 停止拖拽函數(shù)中，開啟定時器

  • onScrollBeginDrag 開始拖拽函數(shù)中，清除定時器

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

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

• render函數(shù)最終表現(xiàn)為

    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>
    )
  

  },