如何动态更改navigationOption (标题)？
如何动态更改navigationOption (标题)？
提问于 2019-07-18 07:03:59
我使用了一个名为react本地本地化的库来翻译我的应用程序。除“抽屉导航器”和“底部标签导航器”的标题外，所有内容都将被翻译。
已经尝试过不同的方法。但是，当我在寻找解决方案时，我遇到了这样的说法: navigationOption不会重新呈现更改，您应该返回标题值来修复它。下面是我代码的一些片段。
changeLangFa() {
const lan = 'fa';
saveSettings(lan);
RNRestart.Restart();
}
changeLangEn() {
const lan = 'en';
saveSettings(lan);
RNRestart.Restart();
}.
async componentWillMount() {
const lan = await loadSettings();
strings.setLanguage(lan);
}.
const AppDrawerNavigator = createDrawerNavigator({
AppTabNavigator: {
screen: AppTabNavigator,
navigationOptions: ({
title: strings.settingsPage.settingsTitle,
drawerIcon: () => (
<Icon name="cogs" size={22} />
)
})
},
AboutUs: {
screen: AboutUs,
navigationOptions: ({
title: strings.aboutUsPage.aboutUstitle,
drawerIcon: () => (
<Icon name="info-circle" size={23} />
)
})
},前两个函数用于保存所需的语言并将其更改，并将它们绑定到某些按钮。代码的第二部分是语言配置加载到App.js文件中的位置。最后一个是我的导航器配置(其中一些)。我做错什么了吗？如果是，请纠正我，如果没有，它会修正以某种方式改变navigationOption，这将动态地重新呈现更改吗？如果是，请指出怎么做。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-18 16:14:53
在洪开发和修改它的答案的帮助下，我能够修复这个问题并创建一个动态的navigationOptions。正确的代码片段如下所示：
AboutUs.js
static navigationOptions = () => ({
title: strings.aboutUsPage.aboutUstitle
})Stack Overflow用户
发布于 2019-07-18 07:49:37
在index.js中设置并相应使用。
index.js
let strings = new LocalizedStrings({
en:{
title:"How do you want your egg today?",
boiledEgg:"Boiled egg",
softBoiledEgg:"Soft-boiled egg",
choice:"How to choose the egg"
},
fa: {
title:"Come vuoi il tuo uovo oggi?",
boiledEgg:"Uovo sodo",
softBoiledEgg:"Uovo alla coque",
choice:"Come scegliere l'uovo"
}
});
...
componentDidmount() {
strings.setLanguage('fa'); // When the local value of the user's mobile phone is 'fa'
}AboutUs.js
static navigationOptions = {
title:{strings.title},
};
/* render function, etc */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57088829
复制相关文章
相似问题
腾讯云开发者
