React-Localization setLanguage() 不更新页面答案

【问题标题】：React-Localization setLanguage() does not update the pageReact-Localization setLanguage() 不更新页面
【发布时间】：2020-03-21 22:24:51
【问题描述】：

我想达到什么目的

目前，我正在尝试在我们当前的 React-Native 项目中实现本地化。

为此，我选择以下包：React-Localization

我们的项目将 React-Native 与 TypeScript 结合使用。

有什么问题

我编写了一个函数来将语言从“en”设置为“nl”。

然后我有两个页面：

主页（包含更改语言的功能并具有文本元素）
设置（具有文本元素）

仅更新主页上的文本。设置页面上的文本元素未翻译。我的标题和底部导航也没有翻译。

我使用的是什么代码

切换语言

    switchLanguage() {
        if (translationStrings.getLanguage().toLowerCase() == 'nl') {
            translationStrings.setLanguage('en');
        } else {
            translationStrings.setLanguage('nl');
        }
        this.setState({});
    }

翻译

export const translationStrings = new LocalizedStrings({
    en: {
        tempTest: "English test one",
        tempTest2: "English test two"
    },
    nl: {
        tempTest: "Dutch test een",
        tempTest2: "Dutch test twee"
    }
});

我尝试翻译的元素示例。

// This is on the home page so it works.
                <Text>
                    {translationStrings.tempTest}
                </Text>

// This is on the settings page and it does not work.
                <Text>
                    {translationStrings.tempTest2}
                </Text>

另外，标题和底部导航没有更新/翻译。

谁能告诉我我到底做错了什么？

感觉我应该给应用程序一个标志，表明所有内容都已翻译，并且应该重新加载什么的。

【问题讨论】：

快速更新。我已经在我的项目中实现了 React Redux。这使得全局状态成为可能，因此我现在也可以翻译其他页面。但是，我仍在尝试找到翻译底部选项卡导航器的解决方案。

标签： reactjs typescript react-native

【解决方案1】：

所以对于其他页面，我使用了 React Redux 来翻译内容。

通过对导航选项进行以下更改，我设法翻译了底部导航器。

旧 ->

Settings: {
      screen: Settings,
      navigationOptions: {
        tabBarLabel: i18next.t('Settings')
      },
    },

新 -->

Settings: {
      screen: Settings,
        navigationOptions: ({ navigation, navigationOptions }) => ({
        tabBarLabel: i18next.t('Settings')
      }),
    },

【讨论】：