React Native实现图片轮播

ScrollView实现轮播图

标签（空格分隔）： React

---

效果图

图片轮播.png

首先给项目安装计时器插件

进入到项目根目录，运行以下命令

npm i react-timer-mixin --save

实现图片轮播

import React,{Component} from 'react';

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

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

//计算屏幕宽高
var Dimensions = require('Dimensions');
var screenWidth = Dimensions.get('window').width;

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

class movie extends React.Component{
    //注册计时器
    mixins:[TimerMixin]

    // 设置可变的和初始值
    constructor(props) {
        super(props);
        this.state= {
            currentPage:0
        }
    }

    // 设置固定值
    defaultProps(){
        return{
            // 每隔多少时间滚动一次
            duration:1000000
        }
    }

    //渲染视图
    render() {
        return (
            
                this.onAnimationEnd(scrollView)}
                // 开始拖拽的时候停止掉定时器
                onScrollBeginDrag={this.onScrollBeginDrag}
                // 停止拖拽的时候开启定时器
                onScrollEndDrag={this.onScrollEndDrag}
                >
                    {this.renderAllImage()}
                
                {/*返回指示器*/}
                
                    {this.renderPageCircle()}
                
            
        );
    }

    // 添加所有图片
    renderAllImage(){
        // 数组
        var allImage = [];
        // 获取图像数组
        var imgsArr = ImageData.data;
        // 遍历数组
        for (var i=0;i
            );
        }

        // 返回数组
        return allImage;
    }

    // 返回指示器小圆点
    renderPageCircle(){
        //定义一个数组放置所有的圆点
        var indicatorArr = [];
        // 定义当前页指示器的样式
        var style;
        // 拿到图像数组
        var imgsArr = ImageData.data;
        // 遍历数组
        for (var i=0;i•
            );
        }

        // 返回小圆点
        return indicatorArr;
    }

    // 当滚动结束的时候调用
    onAnimationEnd(scrollView){
        // 求出水平方向上的偏移量
        var offSetX = scrollView.nativeEvent.contentOffset.x;
        // 求出当前的页数
        var currentPage = Math.floor(offSetX/screenWidth); // 求出的页数转成整数
        // 更新状态机,重新绘制UI
        this.setState({
            currentPage:currentPage
        });

    }

    // 一般在这个方法中实现一些复杂的操作,或网络请求
    componentDidMount() {
        // 开启定时器
        this.startTimer();
    }
    
    // 当开始拖拽的时候调用
    onScrollBeginDrag(){
        console.log('开始退拽');
        // ()=>stopTimer();
        clearInterval(this.timer);
    }
    
    // 停止拖拽的时候唤醒定时器
    onScrollEndDrag(){
        // 开启定时器
        ()=>startTimer();
    }

    stopTimer(){
        clearTimeout(this.timer);
    }

    // 开启定时器
    startTimer(){
        console.log('开启定时器');
        // 获取到scrollView
        var scrollView = this.refs.scrollView;
        var imgCount = ImageData.data.length;
        // 添加定时器
        this.timer = setInterval(()=> {
            // 设置圆点
            var activePage=0;
            // 判断
            if ((this.state.currentPage+1)>=imgCount){
                // 越界
                activePage=0;
            }else {
                activePage=this.state.currentPage+1;
            }

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

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

        },1000);
    }
}

//设置样式
const styles = StyleSheet.create({
    container:{
        marginTop:25,
    },
    //指示器样式
    pageViewStyle:{
        width:screenWidth,
        height:25,
        backgroundColor:'rgba(0,0,0,0.3)',
        // 定位到滚动图的底部
        position:'absolute',
        bottom:0,
        // 设置主轴的方向
        flexDirection:'row',
        // 设置侧轴垂直居中
        alignItems:'center'
    }
});

//注册组件
AppRegistry.registerComponent('movie',()=>movie);

注意

这里边有一个小的BUG，就是拖拽的时候无法停止掉定时器，我尝试了几种方法始终不行，希望路过的大神给予指点

DEMO所需资源

链接: https://pan.baidu.com/s/1dFkNQFn 密码: g9f3