ReactNative——TabNavigator的深入了解,打造一个自定义的Tab

本文介绍如何使用React-Navigation的TabNavigator实现一个自定义的Tab,通过隐藏标签文字,利用tabBarIcon属性返回自定义组件,实现特殊布局需求。通过调整tabBarOptions属性,如设置showLabel和showIcon,以及修改样式,可以实现自定义Tab的样式和功能。

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

                                                 

     最近有一个类似图片中的需求,左右滑动来切换下方的列表。一开始看到,就想到React-Navigation中的TabNavigator,但是,这个图中的Tab与传统的Tab有一些区别,一般的Tab都是上面一个图标,下面一个文字(类似QQ,微信的底部导航)或者没有图标,单纯是一个文字。所以看到图上的需求,还是觉得有些棘手,不知道有没有自定义Tab格式的方法,请教了其他人后,才得到答案。

     具体思路就是,TabNavigator中navigationOptions里的tabBarIcon属性是设置图标的,这个图标可以返回一个任意组件,不一定非要是一个Image,所以通过隐藏tabLabel,自定义tabBarIcon,我们就可以达到自定义Tab的目的。

     再通过两张图片,介绍一下TabNavigator的一些属性,主要是tabBarOptions的一些属性:

         

tabBarOptions:{
        labelStyle:{},              //tab中文字标题的样式(如文字大小,文字颜色)
        iconStyle:{width:width/2,height:50},      //tab中图片的样式(图中蓝色的区域)
        tabStyle:{backgroundColor:'white',height:60},  //单个tab的样式(图中绿色和深绿色的区域)
        indicatorStyle:{backgroundColor:'red'},        //指示条的样式(图一黄色的指示条,图二黑色的指示条)
        style:{backgroundColor:'white',height:70,justifyContent:'center'},  //整个导航栏的样式(图中红色区域,总体的父组件)
        showLabel:false,    //是否显示标题文字
        showIcon:true     //是否显示图标,默认false,不显示地置为true的话,即使设置了图片,也不会显示
    }

       通过图片和代码,大家应该能理解Tab的组成部分以及如何设置各个部分的style。

        所以要想实现一开始的需求,我们要先隐藏label,设置showLabel为false。将图标显示出来,设置showIcon为true。然后尽可能的扩大蓝色区域的面积,以便我们能更好地“自定义tab”。就是通过设置style,tabStyle,iconStyle的宽,高,来让tabIcon的面积最大化。

 tabBarLabel:'123',
        tabBarIcon:()=>(
            <RenMinBiTab/>
        ),

然后通过定义tabBarIcon属性,返回自己自定义的组件,就大功告成了。


参考:

ReactNative导航新宠儿react-navigation

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值