1.首先如果檔案index.android.js   或者 index.ios.js  我這裡用的是前者

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

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

import ScrollViewDemo from "./scrollViewDemo";
import ScrollViewTop from "./scrollViewTop";
import PositionDemo from "./positionDemo";

export default class CQQLoginDemo extends Component {
  
  render() {
    return (
    <ScrollViewTop/>
    );
  }

}
AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);
 

這裡的BadgeData.json 如下：

{
  "data":[
    {
      "icon" : "danjianbao",
      "title" : "單肩包"
    },
    {
      "icon" : "liantiaobao",
      "title" : "鏈條包"
    },
    {
      "icon" : "qianbao",
      "title" : "錢包"
    },
    {
      "icon" : "shoutibao",
      "title" : "手提包"
    },
    {
      "icon" : "shuangjianbao",
      "title" : "雙肩包"
    },
    {
      "icon" : "xiekuabao",
      "title" : "斜挎包"
    }
  ]
}
 

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

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

let Dimensions = require('Dimensions');
let ScreenWidth = Dimensions.get('window').width;
let ScreenHeight = Dimensions.get('window').height;

import ImageData from "./BadgeData.json"; 

export  default class scrollViewTop extends Component {
  
  constructor(props) {
    super(props);
    this.state = { currentPage: 0 };
  }

  static defaultProps = {
    duration: 1000,
  }

  componentDidMount() {
    this._startTimer();

  }

  componentWillUnmount() {
    // 如果存在this.timer，則使用clearTimeout清空。
    // 如果你使用多個timer，那麼用多個變數，或者用個數組來儲存引用，然後逐個clear
    this.timer && clearTimeout(this.timer);
  }

  render() {
    return (
      <View style={styles.continer}>
        <ScrollView
          ref='scrollView'
          //水平方向
          horizontal={true}
          //當值為true時顯示滾動條
          showsHorizontalScrollIndicator={false}
          //當值為true時，滾動條會停在滾動檢視的尺寸的整數倍位置。這個可以用在水平分頁上
          pagingEnabled={true}
          //滑動完一貞
          onMomentumScrollEnd={(e)=>{this._onAnimationEnd(e)}}
          //開始拖拽
          onScrollBeginDrag={()=>{this._onScrollBeginDrag()}}
          //結束拖拽
          onScrollEndDrag={()=>{this._onScrollEndDrag()}}
          >
          {this._renderAllImage()}
        </ScrollView>
        <View style={styles.pageViewStyle}>
         {this._renderAllIndicator()}
        </View>
      </View>
    );
  }
  /**開始拖拽 */
  _onScrollBeginDrag(){
    console.log("開始拖拽");
    //兩種清除方式 都是可以的沒有區別
    // this.timer && clearInterval(this.timer);
    this.timer && clearTimeout(this.timer);
  }
  /**停止拖拽 */
  _onScrollEndDrag(){
    console.log("停止拖拽");
    this.timer &&this._startTimer();
  }

  /**1.輪播圖片展示 */
  _renderAllImage() {
    let allImage = [];
    let imgsArr = ImageData.data;
    for (let i = 0; i < imgsArr.length; i++) {
      let imgsItem = imgsArr[i];
     allImage.push(
        <Image key={i} source={{uri:imgsItem.icon}} style={styles.imageStyle} />
      );
    }
    return allImage;
  }
  
  /**2.手動滑動分頁實現 */
  _onAnimationEnd(e) {
    //求出偏移量
    let offsetX = e.nativeEvent.contentOffset.x;
    //求出當前頁數
    let pageIndex = Math.floor(offsetX / ScreenWidth);
    //更改狀態機
    this.setState({ currentPage: pageIndex });
  }

    /**3.頁面指標實現 */
    _renderAllIndicator() {
    let indicatorArr = [];
    let style;
    let imgsArr = ImageData.data;
    for (let i = 0; i < imgsArr.length; i++) {
      //判斷
      style = (i==this.state.currentPage)?{color:'orange'}:{color:'white'};
      indicatorArr.push(
        <Text key={i} style={[{fontSize:30},style]}>
         •
        </Text>
      );
    }
    return indicatorArr;
  }

  /**4.通過定時器實現自動播放輪播圖 */
    _startTimer(){
    let scrollView = this.refs.scrollView;
    this.timer = setInterval(
      ()=>{console.log('開啟定時器'); 
       let imageCount = ImageData.data.length;
       //4.1 設定圓點
       let activePage = 0;
       //4.2判斷
       if(this.state.currentPage>=imageCount+1){
         activePage = 0;
       }else{
         activePage = this.state.currentPage+1;
       }
       //4.3 更新狀態機
       this.setState({currentPage:activePage});
       //4.4 讓scrollview 滾動起來
       let offsetX = activePage * ScreenWidth;
       scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true});
      },
       this.props.duration
     );
    }
}

const styles = StyleSheet.create({
  continer:{
    backgroundColor: '#dddddd'
  },
  imageStyle:{
    height:400,
    width:ScreenWidth
  },
  pageViewStyle:{
    height:25,
    width:ScreenWidth,
    backgroundColor:'rgba(0,0,0,0.4)',
    position:'absolute',
    bottom:0,

    flexDirection:'row',
    alignItems:'center',
  }
});

 

連結：http://pan.baidu.com/s/1kVcAVTP 密碼：e9kf