用于 tabBarLabel 的 React Navigation v5 更新本地化不起作用答案

【问题标题】：React Navigation v5 update localization for tabBarLabel is not working用于 tabBarLabel 的 React Navigation v5 更新本地化不起作用
【发布时间】：2021-09-11 07:07:05
【问题描述】：

我的 React 导航版本刚刚从 v4 升级到 v5。

这是我的嵌套导航：

堆栈导航

主要（Tab.Navigator）
- 主页（堆栈导航）
  - 屏幕 A（初始路线屏幕）
  - 屏幕 B（屏幕）
- 设置（堆栈导航）
网页（Tab.Navigator）

我在屏幕 A headerRight() 中放置了一个语言切换按钮，并使用 react-redux 处理语言状态。

this.props.navigation.setOptions({ 
        title: I18n.t("ScreenA"),
        headerRight: () => (< LangSwitchButton />),
    })

在 tabNavigator.js 中，

< Tab.Screen 
   name="TabA"
   component={homeScreen} 
   options={tabBarLabel: I18n.t("tabA")}
   listeners={({ navigation, route }) => ({navigation.navigate("home"))} 
/>

在导航 v4 中，可以使用静态导航选项实时切换语言。但是在导航 v5 中，this.props.navigation.setOptions 无法更新 tabBarLabel 的状态。只有点击到其他屏幕并返回屏幕 A 才能更新语言状态。

我目前的做法是将this.props.navigation.setOptions部分放在render()中，语言切换适用于标题和主要内容，但tabBarLabel的语言仍然没有实时更新。

有什么方法可以通过屏幕级别的setOptions来更新tabBarLabel？

谢谢。

【问题讨论】：

标签： react-native react-navigation-v5 react-navigation-stack react-navigation-bottom-tab

【解决方案1】：

你可以试试设置

<Tab.Screen name="TabA" component={homeScreen} options={() => {tabBarLabel: translate} />

【讨论】：

【解决方案2】：

看起来这段代码不会触发重新渲染：

options={tabBarLabel: I18n.t("tabA")}

如果它可以触发重新渲染，它将自动工作。我不确定你的I18n.t 函数是如何实现的，但如果翻译值来自redux 存储，那么你需要使用useSelector 构建一个可以触发重新渲染的钩子。比如：

const useI18n() {
  const language = useSelector(store => store.language);

  return (text) => I18n.t(text, language);
}

// And then use it like

const t = useI18n();

// ...

options={{ tabBarLabel: t("tabA") }}

这是伪代码，仅供参考

在导航 v4 中，可以使用静态导航选项实时切换语言。但是在导航 v5 中，this.props.navigation.setOptions 无法更新 tabBarLabel 的状态。只有点击到其他屏幕并返回屏幕 A 才能更新语言状态。

这不是真的。在 React Navigation 4 中，无法动态更新选项。对于 v5，setOptions 应该可以工作（但方法不正确）。你确定setOptions 被调用（并且来自正确的地方）？

【讨论】：