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中调用便可