RN版本无限轮播的使用（Banner）

最新推荐文章于 2024-06-25 16:27:34 发布

perfect_app

最新推荐文章于 2024-06-25 16:27:34 发布

阅读量2.3k

点赞数

分类专栏： iOS ui基础控件

本文链接：https://blog.csdn.net/perfect_app/article/details/73527925

版权

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

摘要由CSDN通过智能技术生成

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}
              //