參照了這篇文章自己寫(xiě)了一個(gè)做備份http://www.reibang.com/p/84faf0154d5

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView
} from 'react-native';
var Images = require('./images.json');
import Dimensions from 'Dimensions';
import TimerMixin from 'react-timer-mixin';
var width = Dimensions.get('window').width;
var ScrollViewProject = React.createClass({
  mixins:[TimerMixin],
  getInitialState() {
    return {
      currentPage:0
    }
  },
  render() {
    return(
      <View style={styles.container}>
        {/*輪播*/}
        <ScrollView ref='scrollView'
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          pagingEnabled={true}
          onScroll={(e)=>this.changeIndicators(e)}
          onScrollBeginDrag={this.onScrollBeginDrag}
          onScrollEndDrag={this.onScrollEndDrag}
          >
          {this.renderAllImage()}
        </ScrollView>
        {/*輪播指示器*/}
        <View style={styles.indicators}>
          {this.renderIndicator()}
        </View>
      </View>
    );
  },
  componentDidMount() {
    // this.setInterval(
    //   ()=>console.log('testTimeout'),1000
    // );
    // 開(kāi)啟定時(shí)器
    this.startTimer();
  },
  renderAllImage() {
    var allImgs = [];
    var imgData = Images.data;
    var srcs = [
      require("./imgs/a.jpg"),
      require("./imgs/b.jpg"),
      require("./imgs/c.jpg"),
      require("./imgs/d.jpg"),
      require("./imgs/e.jpg")
    ];

    for(let i=0;i<imgData.length;i++) {
      allImgs.push(
        <Image key={i} source={srcs[i]}
          style={{width:width,height:180}}
          />
      )
    }
    return allImgs;
  },
  renderIndicator() {
    var indicators = [];
    for(let i=0;i<5;i++) {
      let style = (i==this.state.currentPage)?{color:'#ffff00'}:{color:'#ffffff'}
      indicators.push(
        <Text key={i} style={[{fontSize:30,marginLeft:5},style]}>?</Text>
      )
    }
    return indicators;
  },
  changeIndicators(e) {
    var offsetX = e.nativeEvent.contentOffset.x;
    this.setState({
      currentPage:Math.floor(offsetX/width)
    })
  },
  // 設(shè)置輪播自動(dòng)滾動(dòng)
  startTimer() {
    // 1. 拿到scrollView
    var scrollView = this.refs.scrollView;
    // 2. 添加定時(shí)器
    this.timer = this.setInterval(()=>{
      // console.log('haha');
      // 2.1 設(shè)置圓點(diǎn)
      var activePage;
      // 2.2 判斷
      if(this.state.currentPage+1 >=5) activePage=0;
      else activePage=this.state.currentPage+1;
      // 2.3 更新?tīng)顟B(tài)
      this.setState({
        currentPage:activePage
      })
      // 2.4 讓scroll滾動(dòng)起來(lái)
      var offsetX = activePage * width;
      scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true});
    },1000);
  },
  // 拖動(dòng)輪播時(shí)停止定時(shí)器
  onScrollBeginDrag() {
    this.clearInterval(this.timer);
  },
  // 拖動(dòng)結(jié)束后打開(kāi)定時(shí)器
  onScrollEndDrag() {
    this.startTimer();
  }
});

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    // marginTop:20
  },
  indicators: {
    flexDirection:'row',
    backgroundColor:'rgba(0,0,0,0.1)',
    height:30,
    width:width,
    alignItems:'center',
    marginTop:-30
  }
});

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

http://upload-images.jianshu.io/upload_images/4638259-dfdf4a7c61cc60e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
效果還行