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

其实标题不算准确, 这里的自定义是指 自定义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 的代码, 是留着做个记录和备忘

具体整理一下过程吧

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

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

3. 重点, 当我们完成上面两个步骤, 会发现, 系统自动的切换选项卡的能力失效了, 我猜测也是因为我们使用了自定义, 可能覆盖或者让系统不再创建默认的icon/title 组件, 也就导致无法触发系统自己的切换能力,
   经过一番查找, 发现我们在第一步的时候, 其实获取了一个蛮重要的props
   

通过这个props, 我们可以拿到 jumpTo 方法, 就可以实现切换选项卡的功能了

   this.navProps.jumpTo("Home")

---

大致就是以上了, 希望能帮助大家, 也给自己留个记录,好以后回来翻翻.(^▽)