ReactNative 轮播图组件Banner的创建

最新推荐文章于 2023-03-30 10:35:32 发布

Hello_MR_Li

最新推荐文章于 2023-03-30 10:35:32 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Hello_MR_Li/article/details/78010936

本文介绍如何在ReactNative中创建一个轮播图组件Banner，使用ES5语法编写，依赖react-timer-mixin库实现定时切换。示例中展示了从本地json文件获取图片数据，如果使用网络图片则需要进行API请求。组件可直接导入并使用。

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

==================================================================

//这里是单独的一个js文件，到时直接导入就可以用这里用的ES5的格式

//这里用的定时器导入计时器类库 react-timer-mixin 不过创建项目的时候就已经有了，可以在你项目的node_modules这个文件夹里面找一下有没有react-timer-mixin，如果没有就要自己导入导入方法导入计时器方法

==================================================================

我这里用的轮播图图片时本地图片var datas= require('../data/banner.json')

如果你用的网络图片就要网络请求然后获得json对象

可以创建一个banner,js文件然后把代码考进去

然后用的时候直接导入这里用的ES5的格式写的所以导入方式./component/banner为你banner,js文件的路径

var BannerDemo= require('./component/banner')

然后直接使用

轮播图效果

===================================================================

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

var datas= require('../data/banner.json')
var Dimensions=require('Dimensions')
var windowwidth=Dimensions.get('window').width
var TimerMixin=require('react-timer-mixin')


var banner = React.createClass({

    getInitialState(){
        return{
            var:currcount=0,
            var:title=datas[currcount].title,
        }
    },

    
    render(){
        return (
            <View style={styles.container}>
                <ScrollView
                    ref="scrollView"
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}
                    onMomentumScrollEnd={ (e)=>this.onPageEnd(e)  }>
                    {this.creatitems()}
                </ScrollView>
                <View style={styles.viewstyle}>
                    {this.creatdot()}
                    <Text style={[{textAlign:'right',flex:1,marginRight:10,color:'red'}]}>{title}</Text>
                </View>
            </View>

        )
    },

    //定时器
    mixins:[TimerMixin],
    //生命周期  耗时操作  开启一个定时器
    componentDidMount(){
        //拿到对象
        var scrollView=this.refs.scrollView;

            this.setInterval(
               function () {
                   //alert("0000")
                   currcount+=1
                   if(currcount>=datas.length){
                       currcount=0
                   }
                   //计算位移的距离
                   var l=currcount*windowwidth
                   //设置滑动距离
                   scrollView.scrollResponderScrollTo({x:l,y:0, animated:true})
                   this.setState({
                       currcount:currcount,
                       title:datas[currcount].title,
                   })
               },2000)
    },
    //contentOffSet 滑动的x轴的距离
    //page当前的页数
    onPageEnd(e){
        var contentOffSet = e.nativeEvent.contentOffset.x
        var page = contentOffSet / windowwidth

        this.setState({
            var: currcount = page,
            var: title = datas[currcount].title,
            var: dotbg='red'
        })

    },


    creatitems(){
        var items=[]
        for(var i=0;i<datas.length;i++){
            var itemdata=datas[i];
            items.push(
                <Image key={i} style={styles.imagestyle} source={{uri:itemdata.icon}}></Image>
            )
        }
        return items

    },

    creatdot(){
        var dots=[]
        for(var i=0;i<datas.length;i++){
            var dotbg=currcount==i ? 'white' : 'red'
            dots.push(
                <Text key={i} style={[styles.textstyle,{backgroundColor:dotbg}]}></Text>
        )
        }
        return dots
    }
})


const styles = StyleSheet.create({
    container: {
        width:windowwidth,
        height:120,
    },
    imagestyle:{
        width:windowwidth,
        height:120
    },

    viewstyle:{
        width:windowwidth,
        height:25,
        backgroundColor:'rgba(255,255,255,0.5)',
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        bottom:0,
        left:0
    },

    textstyle:{
        width:5,
        height:5,
        borderRadius:5,
        marginLeft:8
    }


});


module.exports = banner