React-Native 實現無限輪播

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

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

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

四、須要將資源圖片放到工程中。

五、代碼展現以下：

/** * 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中調用便可