React-Native 实现无限轮播

Posted 2020-08-10 Brisy

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