createBottomTabNavigator中tabBarLabel与showLabel不生效问题排查

我来帮你拆解下问题根源，你遇到的tabBarLabel和showLabel不生效的情况，核心问题是这些属性的配置位置不符合框架要求。

在react-navigation-tabs（对应react-navigation v3/v4版本）的createBottomTabNavigator中，底部标签的专属配置（比如tabBarLabel、showLabel）不能直接放在RouteConfigs的路由对象根层级，必须嵌套在navigationOptions字段里。你现在直接把这些属性写在home路由的根对象下，框架根本不会识别到它们，所以才会默认显示路由的key值（也就是'home'）。

修复后的代码示例 #

把你的RouteConfigs修改成下面这样，就能正常生效了：

import {createBottomTabNavigator} from 'react-navigation-tabs';
import home from '../views/home';
import my from '../views/my';

const RouteConfigs = {
  home: {
    screen: home,
    // 把标签配置放到navigationOptions里
    navigationOptions: {
      tabBarLabel: 'cc', // 现在会正常显示这个文字
      showLabel: true, // 如果要显示标签，设为true（默认就是true，也可以不写）；设为false会隐藏文字
    },
  },
  my: {
    screen: my,
    // 也可以给my路由自定义标签
    navigationOptions: {
      tabBarLabel: 'my',
    },
  },
};

const TabOptions = {
  swipeEnabled: true,
  animationEnabled: true,
  // 也可以在这里设置全局默认的标签配置，比如所有标签的统一样式
  defaultNavigationOptions: {
    // showLabel: true, // 全局默认显示标签
  },
};

const TabNavigator = createBottomTabNavigator(RouteConfigs, TabOptions);
export default TabNavigator;

额外说明 #

• showLabel的作用是控制是否显示标签文字，如果你设置为false，即使写了tabBarLabel也不会显示文字，所以如果想显示'cc'，这个值应该设为true或者直接省略（因为默认值就是true）。
• 如果所有标签有通用的配置（比如统一的样式、是否显示标签），可以把这些配置放到TabOptions的defaultNavigationOptions里，这样所有路由都会继承这个配置，不用逐个路由重复编写。

内容的提问来源于stack exchange，提问作者ebyte