reactjs - React-Localization setLanguage() 不更新页面

Question

我想要实现什么目标

目前，我正在尝试在我们当前的 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>

此外，标题和底部导航不会更新/翻译。

有人可以让我深入了解我到底做错了什么吗？

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

Answer 1

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

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

旧 ->

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

新-->

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