React-navigation 4.x tabBarButtonComponent的使用和自定义-CSDN博客

本文链接：https://blog.csdn.net/iOSTianNan/article/details/106273407

这里转载一个写的蛮好的贴,留着参考参考
React-Native react-navigation4.x 使用记录

其实标题不算准确, 这里的自定义是指自定义React-navgation4.x 中, bottomTabBar中的几个可以点击的
bottomTabbarButton ( 底部tabBar按钮), 姑且我这样描述,

参考链接:
1.React Navigation 3x系列教程』createBottomTabNavigator开发指南
 2.React-navigation4.x 官网
 3.自定义react-navigation的TabBarComponent
4.React Navigation（一）-Navigation属性(API)

先看效果

在这里插入图片描述

1. 常规的创建 React-navigation (4.x) TabBar

import { createBottomTabNavigator } from 'react-navigation-tabs';
createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);

具体的实现网上也很多

如果要自定义呢?

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = props => <BottomTabBar {...props} />;

const TabScreens = createBottomTabNavigator(
  {
    // other screens
  },
  {
    tabBarComponent: props => (
      <TabBarComponent {...props} style={{ borderTopColor: '#605F60' }} />
    ),
  }
);

官网也讲的很明白, 就是通过 tabBarComponent这个参数来返回一个自定义的 TabBarComponent组件,其实就是用 BottomTabBar 这个组件, 来创建, 但是这也仅仅就是用来修改整个底部tabBar的容器而已, 真正的其中的icon/title , 还需要在各个screen的navigationOptions:{}中做修改

那么来吧

上代码

 Home: {
        screen: Home,
        navigationOptions: {
           /*----常规的icon/title  -----*/
          tabBarOnPress: ({navigation, defaultHandler}) => {
          //tabBarOnPress 用来在系统自动切换选项卡的时候, 提供一用来插入自己要执行的代码的钩子函数
            defaultHandler(); // 如果使用常规方式, 又想在点击icon的时候做点自定义的事情,就可以在这里添加一些事件,defaultHandler(); 是系统自己提供的切换选项卡方法, 不写就无法切换屏幕,
          },
          tabBarLabel: '首页',
          tabBarIcon: ({focused, tintColor}) => (
            <Image
              style={[styles.im]}
              source={
                focused ? Images.bottomTabBarIcon_mine_show : Images.bottomTabBarIcon_mine_hide
              }
            />
          ),


          /*---- 自定义的api及返回的自定义动画组件 -----*/
          // tabBarButtonComponent, 用来自定义按钮和文字的api, 
          // 当实现 tabBarButtonComponent 这个api的时候, react-navigation 自动创建的icon/title就失效
          tabBarButtonComponent: (() =>
            (<BottomBarAnimatedItem
              onPress={() => {
                SetItemsArray(0);
                DeviceEventEmitter.emit('TabBarClick')
                this.navProps.jumpTo("Home")
              }}
              ItemsArray={ItemsArray}
              itemNum={0}
            />)),
        },
      },

上面是一个screen 的具体路由信息及配置, 上面我没有删除常规的创建icon/title 的代码, 是留着做个记录和备忘

具体整理一下过程吧

首先我们需要改造 createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);这个函数中的TabNavigatorConfig, 添加 tabBarComponent, 用来返回一个自定义底部tabbarComponent 父容器,这样才能将自定义的icon/title 合理布局, 不然就会这样

2.其次我们需要改造 createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);这个函数中RouteConfigs中的每个navigationOptions, 通过 tabBarButtonComponentapi来返回我们自定义的动画组件,