如何修改createStackNavigator对应底部标签路由显示名称实现多语言适配

问题原因 #

createBottomTabNavigator 第一个参数中配置的对象键是固定路由标识，仅用于内部路由匹配逻辑，无法直接作为动态显示的标签文本，也不支持直接传入动态i18n表达式作为键值。

解决方案 #

保留固定路由标识不变，通过单独配置tabBarLabel属性实现动态多语言标签：

React Navigation 4.x 版本适配代码 #

root: createBottomTabNavigator(
  { 
    // Main为固定路由标识，保持不变
    Main: {
      screen: createStackNavigator(
        {
          first: screen1,
          second: screen2,
          third: screen3,
        }
      ),
      // 单独配置标签显示文本，支持动态调用i18n能力
      navigationOptions: {
        tabBarLabel: () => i18.t('newName')
      }
    }
  }
)

React Navigation 5.x/6.x 版本适配代码 #

<Tab.Navigator>
  <Tab.Screen 
    name="Main" // 固定路由标识保持不变
    component={MainStack}
    // 动态配置标签文本
    options={{ tabBarLabel: () => i18.t('newName') }}
  />
</Tab.Navigator>

注意事项 #

如果需要切换语言后实时刷新标签显示，需确保i18n库切换语言时会触发对应组件重渲染：若使用react-i18next可通过useTranslation Hook包裹导航配置组件，或监听语言切换事件手动触发导航配置更新。

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