React-Native 實現無限輪播

1、配置環境 http://reactnative.cn/docs/0.25/getting-started.html

2、環境配置出現錯誤，請看這一篇:http://blog.csdn.net/p106786860/article/details/51052299

3、代碼下載地址: https://github.com/BrisyIOS/React-Native-UnlimtedCarousel.git

4、需要將資源圖片放到工程中。

5、代碼展示如下：

/**
 * 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 {width} = Dimensions.get('window');
var TimerMixin = require('react-timer-mixin');

var UnlimtedCarousel = React.createClass({

  // 注冊定時器
  mixins: [TimerMixin],

  // 設置常量
  getDefaultProps() {

    return {
      duration: 2000
    }
  },

  // 初始化變量
  getInitialState() {

    return {currentPage: 0}
  },

  render() {
    return (
        <View style={styles.container}>
  <ScrollView
    ref="scrollView"
    horizontal={true}
    pagingEnabled={true}
    showsHorizontalScrollIndicator={false}
    style={styles.scrollViewStyle}
    onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
    onScrollBeginDrag={this.onScrollBeginDrag}
    onScrollEndDrag={this.onScrollEndDrag}
  >
    {this.renderAllImages()}
  </ScrollView>
    <View style={styles.cycleStyle}>
    {this.renderAllCycle()}
  </View>
    </View>
  )
  },
  // 視圖繪制完畢之后會調用此方法
  componentDidMount() {
    this.startTimer();
  },

  // 開啟定時器
  startTimer() {

    // 拿到scrollView
    var scrollView = this.refs.scrollView;
    // 添加定時器
    this.timer = this.setInterval(function() {

      var tempPage;
      if (this.state.currentPage+1 >=7) {
        tempPage = 0;
      } else {
        tempPage = this.state.currentPage+1;
      }
      // 更新狀態機
      this.setState( {
        currentPage: tempPage
      });

      // 改變scrollView的偏移量
      let offSet = tempPage * width;
      scrollView.scrollTo({x: offSet, y: 0, animated: true});

    }, this.props.duration);
  },

  // 當一幀滾動結束的時候會調用此方法
  onAnimationEnd(e) {
    // 獲取偏移量
    let offset = e.nativeEvent.contentOffset.x;
    // 獲取頁碼
    let page = Math.floor(offset / width);
    // 更新狀態機,重新繪制UI
    this.setState({
      currentPage: page
    });
  },

  onScrollBeginDrag() {
    // 清除定時器
    this.clearInterval(this.timer);
  },

  onScrollEndDrag() {
    // 重新開啟定時器
    this.startTimer();
  },
  // 返回所有圖片
  renderAllImages() {
    var imageItems = [];
    var imageNames = ['蘿卜偽餃子.jpg', '親子丼.jpg', '日式肉末茄子.jpg', '日式燒汁炒牛肉.jpg',
      '日式味噌煎雞塊.jpg', '日式香菇燉雞翅.jpg', '日式炸天婦羅.jpg'];
    var colors = ['red', 'blue', 'green', 'purple', 'brown', 'black', 'yellow'];

    for (var i=0; i<7; i++) {
      // 將Image裝入數組中
      imageItems.push(
      <Image key={i}
      source={{uri: imageNames[i]}}
      style={{backgroundColor: colors[i], width: width, height: 300}} />
    );
    }
    // 返回所有Image
    return imageItems;
  },
  // 設置小圓點
  renderAllCycle() {
    var cycleItems = [];
    var colorStyle;
    for (var i=0; i<7; i++) {
      colorStyle = (i==this.state.currentPage) ? {color: 'gray'} : {color: 'white'}
      cycleItems.push(
      <Text key={i} style={[{fontSize: 30, left: 10}, colorStyle]}>&bull;</Text>
    )
    }
    return cycleItems;
  }
})

// 設置樣式
const styles = StyleSheet.create({

  container: {
    width: width,
    height: 300,
    backgroundColor: 'green',
  },

  scrollViewStyle: {
    backgroundColor: 'yellow',
    width:width,
    marginTop: 20
  },

  cycleStyle: {
    backgroundColor: 'rgba(241,241,241,0.5)',
    width: width,
    height: 30,
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    alignItems: 'center'
  }
});

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

這只是展示了iOS的一部分代碼，要運行到Android上，可以吧實現輪播的代碼寫到一個文件中，封裝成組件，然后在iOS和Android中調用即可