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