如何刷新反应导航标题 - 多语言问题

Question

我正在尝试使用 "i18n-js": "^3.2.1" 在我的 react native 应用程序中集成多语言 我想在更改 i18n 的语言环境后从 react-navigation 更新标题。

一旦更改语言环境，我将运行 this.forceUpdate(); 重新加载页面。

switchSettings = (field_name, value) => {
        console.log(field_name);
        switch (field_name) {
            case "languages": 
                setLanguage(value[0])
                this.forceUpdate();
                break;

            default: 
                break;
        }
    }

这适用于我的自定义组件但是，这不会更新我的反应导航标题标题/后退按钮：\

react-navigation 有什么可用于重新渲染标题或重新评估 navigationOptions 的东西吗？

非常感谢您的帮助。 谢谢

编辑1：

static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: i18n.t('title')
        }
    };

当我进入下一页时，上面的工作正常，但如果我返回，navigationOptions 不会重新评估

有什么建议吗？

谢谢

Answer 1

您可以通过更新主题对象来刷新导航标题。为此，我在主题中包含语言环境。这是一些示例 Typescript 代码：

import {
  DarkTheme,
  DefaultTheme,
  NavigationContainer,
  Theme,
} from '@react-navigation/native'

...

export function Navigation({ darkMode }: Props) {
  const { locale } = useLocale() // a custom hook to get locale from a context

  type ThemeWithLocale = Theme & {
    locale: string | undefined
  }

  const theme: ThemeWithLocale = {
    locale,
    ...(darkMode ? DarkTheme : DefaultTheme),
  }

  return (
    <NavigationContainer theme={theme}>
      <Root />
    </NavigationContainer>
  )
}

Answer 2

您在声明路由器时定义的路由和navigationOptions 是在启动应用程序时设置的。所以当语言道具更新时它们不会改变。你可以做的是添加static navigationOptions inside 你的屏幕组件并在那里定义标题。

例如。

static navigationOptions = {
     title: this.props.language : "en"? "English title": "Other language title",
};