RN实现轮播器

ImageData.json

{
  "data": [
    {
      "img" : "goods_161203200655102x",
      "title" : "开走不谢，快，开走，表客气！"
    },
    {
      "img" : "goods_1612032006553005x",
      "title" : "你值得拥有，都说了，你值得拥有，开走"
    },
    {
      "img" : "goods_1612032006556775x",
      "title" : "成功者的范，开起来很范，真的，不假"
    },
    {
      "img" : "goods_1605271604106062x",
      "title" : "戴走不谢"
    },
    {
      "img" : "goods_1605271604094323x",
      "title" : "你要戴上它"
    },
    {
      "img" : "goods_1605271604107887x",
      "title" : "范者标配"
    }
  ]
}
           

index.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image
} from 'react-native';

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
var TimerMixin = require('react-timer-mixin');
var ImageData = require('./ImageData.json');

var AHelloworld = React.createClass({
  mixins: [TimerMixin],
  getDefaultProps(){
    return{
      scrollDuration: 2000,
      imageHeight: 180
    }
  },
  getInitialState(){
    return{
      currentPageIndex: 0,
      title:''
    }
  },
  componentDidMount(){
    this.startTimer();
  },
  render() {
    return (
      <View style={styles.container}>
        <ScrollView
            ref="scrollViewRef"
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            pagingEnabled={true}
            onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
            onScrollBeginDrag={this.onScrollBeginDrag}
            onScrollEndDrag={this.onScrollEndDrag}>
          {this.renderAllImage()}
        </ScrollView>

        <Text style={styles.tipStyle}>
{this.state.title}</Text>
        <View style={styles.pageViewStyle}>
          {this.renderPageCircle()}
        </View>
      </View>
    );
  },
  renderAllImage(){
    var allImage = [];
    var imgsArr = ImageData.data;
    for(var i=0; i<imgsArr.length; i++){
      allImage.push(
          <Image key={i} source={{uri: imgsArr[i].img}} style={{width:width, height:this.props.imageHeight,resizeMode:Image.resizeMode.stretch}}/>
      );
    }
    return allImage;
  },
  renderPageCircle(){
    var indicatorArr = [];
    var style;
    var imgsArr = ImageData.data;
    for(var i=0; i<imgsArr.length; i++){
      style = (i==this.state.currentPageIndex) ? {color:'orange'} : {color:'white'};
      indicatorArr.push(
          <Text key={i} style={[{fontSize:18},style]}>•</Text>
      );
    }
    return indicatorArr;
  },
  onScrollBeginDrag(){
    this.clearInterval(this.timer);
  },
  onScrollEndDrag(){
    this.startTimer();
  },
  onAnimationEnd(e){
    var offSetX = e.nativeEvent.contentOffset.x;
    var activePage = Math.floor(offSetX / width);
    this.setState({
      currentPageIndex: activePage
    });
  },
  startTimer(){
    var scrollViewRef = this.refs.scrollViewRef;
    var imgCount = ImageData.data.length;
    this.timer = this.setInterval(function () {
      var activePage = (this.state.currentPageIndex+1) >= imgCount ? 0 :this.state.currentPageIndex+1;
      this.setState({
        currentPageIndex: activePage,
        title:ImageData.data[activePage].title
      });
      scrollViewRef.scrollResponderScrollTo({x:activePage * width, y:0, animated:true});
    }, this.props.scrollDuration);
  },
});

const styles = StyleSheet.create({
  container: {
    // marginTop:20,
  },
  tipStyle:{
    width:width,
    backgroundColor:'rgba(0,0,0,0)',
    position:'absolute',
    bottom:2,
    fontSize: 14,
    color: '#FFFFFF',
  },
  pageViewStyle:{
    width:width,
    height:20,
    backgroundColor:'rgba(0,0,0,0.1)',
    position:'absolute',
    bottom:0,
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'flex-end'
  }
});

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