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

本文链接：https://blog.youkuaiyun.com/mikuoohash/article/details/80208508

本文介绍如何使用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