我正在构建一个应用程序，用户在第一次启动应用程序时会被提示选择他们的语言。然后使用 AsyncStorage 将语言存储在本地。
每次应用程序启动时，都会从存储中检索语言并将其保存到global.lang变量中以供所有组件使用：
AsyncStorage.getItem('settings', (err, item) => {
global.lang = item.lang;
});
当我在任何组件global.lang的render()方法中使用变量时，一切似乎都没问题。但是，在初始化导航器时尝试使用相同的变量时遇到了麻烦：
const TabNavigator = createBottomTabNavigator(
{
Home: {
screen: HomeScreenNavigator,
navigationOptions:{
title: strings['en'].linkHome, --> this works
}
},
News: {
screen: NewsScreen,
navigationOptions:{
title: strings[global.lang].linkNews, --> this fails
}
}
});
我相信这是因为在构建导航器时未从 AsyncStorage 检索该值。如果我global.lang手动设置（例如global.lang = 'en';）它似乎没问题，但当我尝试从存储中检索它时就不行了。
有什么我想念的吗？我可以使用默认语言初始化导航器，然后根据检索到的值更改标题吗？
任何帮助将不胜感激。
导航器是在应用程序启动时构建的。因此，您需要使用一些占位符文本并使用此处描述的方法，根据屏幕键更改所有屏幕标题...
或者......这听起来很疯狂，我从未尝试过。但是您可以使用加载屏幕来检索语言设置。然后...通过条件渲染你“渲染”一个导航器组件。不知道它是否会以相同的方式工作，但您可以尝试一下。在我为此目的刚刚创建的一些代码下方
export default class MainComponent extends React.Component {
constructor(props) {
super(props);
this.state = { hasLanguage:false};}
componentDidMount(){
this.retrieveLanguage()
}
async retrieveLanguage(){
//await AsyncStorage bla bla bla
//then
this.setState({hasLanguage:true})
}
render() {
return (
{
this.state.hasLanguage?
<View>
//this is a view that is rendered as a loading screen
</View>:
<Navigator/>//this will be rendered, and hence, created, when there is a language retrieved
}
);
}
}
再次。我不知道 react navigation 是否会在 render 处创建导航器。如果是这样的话。当它创建一个导航器时，应该在那里使用 languaje 。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句