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

                                                 

     最近有一个类似图片中的需求，左右滑动来切换下方的列表。一开始看到，就想到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:()=>(
            
        ),

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

参考：

ReactNative导航新宠儿react-navigation