RN版本无限轮播的使用(Banner)

这篇博客详细介绍了如何在React Native中创建一个无限轮播的Banner组件。通过使用ScrollView、Dimensions、TimerMixin和JSON数据,实现了图片的轮播,并且在用户开始和结束拖拽时动态调整定时器。每个轮播图片下方还展示了对应的页码指示器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

index.ios.js

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

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

// 引入计时器类库
var TimerMixin = require('react-timer-mixin');

// 引入json数据
var ImageData = require('./ImageData.json');


var FScrollViewDemo1 = React.createClass({

  // 注册计时器
  mixins: [TimerMixin],

  // 设置固定值
  getDefaultProps(){
    return{
      // 每隔多少时间
      duration: 1000
    }
  },

  // 设置可变的和初始值
  getInitialState(){
    return{
      // 当前的页码
      currentPage: 0
    }
  },

  render(){
    return(
        <View style={styles.container}>
          <ScrollView
              ref="scrollView"
              horizontal={true}
              // 隐藏水平滚动条
              showsHorizontalScrollIndicator={false}
              // 自动分页
              pagingEnabled={true}
              // 当一帧滚动结束
              onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
              // 开始拖拽
              onScrollBeginDrag={this.onScrollBeginDrag}
              // 停止拖拽
              onScrollEndDrag={this.onScrollEndDrag}
          >
            {this.renderAllImage()}
          </ScrollView>
          {/*返回指示器*/}
          <View style={styles.pageViewStyle}>
            {/*返回5个圆点*/}
            {this.renderPageCircle()}
          </View>
        </View>
    );
  },

  // 调用开始拖拽
  onScrollBeginDrag(){
    // 停止定时器
    this.clearInterval(this.timer);
  },

  // 调用停止拖拽
  onScrollEndDrag(){
    // 开启定时器
    this.startTimer();
  },

  // 实现一些复杂的操作
  componentDidMount(){
    // 开启定时器
    this.startTimer();
  },

  // 开启定时器
  startTimer(){
    // 1. 拿到scrollView
    var scrollView = this.refs.scrollView;
    var imgCount = ImageData.data.length;

    // 2.添加定时器  this.timer --->可以理解成一个隐式的全局变量
    this.timer = this.setInterval(function () {
      // 2.1 设置圆点
      var activePage = 0;
      // 2.2 判断
      if((this.state.currentPage+1) >= imgCount){ // 越界
        activePage = 0;
      }else{
        activePage = this.state.currentPage+1;
      }

      // 2.3 更新状态机
      this.setState({
        currentPage: activePage
      });

      // 2.4 让scrollView滚动起来
      var offsetX = activePage * width;
      scrollView.scrollResponderScrollTo({x:offsetX, y:0, animated:true});

    }, this.props.duration);

  },


  // 返回所有的图片
  renderAllImage(){
    // 数组
    var allImage = [];
    // 拿到图像数组
    var imgsArr = ImageData.data;
    // 遍历
    for(var i=0; i<imgsArr.length; i++){
      // 取出单独的每一个对象
      var imgItem = imgsArr[i];
      // 创建组件装入数组
      allImage.push(
          <Image key={i} source={{uri: imgItem.img}} style={{width:width, height:120}}/>
      );
    }
    // 返回数组
    return allImage;
  },

  // 返回所有的圆点
  renderPageCircle(){
    // 定义一个数组放置所有的圆点
    var indicatorArr = [];
    var style;
    // 拿到图像数组
    var imgsArr = ImageData.data;
    // 遍历
    for(var i=0; i<imgsArr.length; i++){

      // 判断
      style = (i==this.state.currentPage) ? {color:'orange'} : {color:'#ffffff'};

      // 把圆点装入数组
      indicatorArr.push(
          <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
      );
    }
    // 返回
    return indicatorArr;
  },

  //  当一帧滚动结束的时候调用
  onAnimationEnd(e){
    // 1.求出水平方向的偏移量
    var offSetX = e.nativeEvent.contentOffset.x;

    // 2.求出当前的页数
    var currentPage = Math.floor(offSetX / width);
    // console.log(currentPage);

    // 3.更新状态机,重新绘制UI
    this.setState({
      // 当前的页码
      currentPage: currentPage
    });
  }

});


const styles = StyleSheet.create({
  container:{
    marginTop:25
  },

  pageViewStyle:{
    width:width,
    height:25,
    backgroundColor:'rgba(0,0,0,0.4)',

    // 定位
    position:'absolute',
    bottom:0,

    // 设置主轴的方向
    flexDirection:'row',
    // 设置侧轴方向的对齐方式
    alignItems:'center'
  }
});
AppRegistry.registerComponent('RNBannerView', () => FScrollViewDemo1);

ImageData.json

{
  "data": [
    {
      "img" : "img_01",
      "title" : "你那一笑倾国倾城"
    },
    {
      "img" : "img_02",
      "title" : "那里记录了最唯美的爱情故事"
    },
    {
      "img" : "img_03",
      "title" : "我怎么是一个剩女"
    },
    {
      "img" : "img_04",
      "title" : "生命中最后的四分钟"
    },
    {
      "img" : "img_05",
      "title" : "我们都需要治疗"
    }
  ]
}





                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值