我想要实现什么目标
目前,我正在尝试在我们当前的 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 来翻译内容。
我设法通过对导航选项进行以下更改来翻译我的底部导航器。
旧 ->
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: i18next.t('Settings')
},
},
新-->
Settings: {
screen: Settings,
navigationOptions: ({ navigation, navigationOptions }) => ({
tabBarLabel: i18next.t('Settings')
}),
},
关于reactjs - React-Localization setLanguage() 不更新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59051977/