Localization of React Native navigators

Question

我正在构建一个应用程序，在该应用程序首次启动应用程序时，提示用户选择其语言。然后使用AsyncStorage在本地存储该语言。

每次启动应用程序时，将语言从存储中检索并保存到global.lang变量中，以供所有组件使用：

AsyncStorage.getItem('settings', (err, item) => {
  global.lang = item.lang; 
});

当我在任何组件中使用global.lang方法中的CC_2变量时，一切似乎都可以。但是，在初始化导航器时尝试使用相同变量时，我遇到了麻烦：

const TabNavigator = createBottomTabNavigator(
 {
    Home: {
      screen: HomeScreenNavigator,
      navigationOptions:{
        title: strings['en'].linkHome,  --> this works
      }
    },
    News: {
      screen: NewsScreen,
      navigationOptions:{
        title: strings[global.lang].linkNews,  --> this fails
      }
    }
});

我相信这是因为在构造导航器时不会从异步检索该值。如果我手动设置global.lang（例如global.lang = 'en';），似乎还可以，但是当我尝试从存储中检索它时。

有我缺少的东西吗？我可以用默认语言初始化导航器并根据检索值更改标题吗？

任何帮助将不胜感激。

Answer 1

导航器是在应用程序启动中构建的。因此，您需要使用某些占位符文本并使用此处描述的方法，在此您根据屏幕键更改所有屏幕标题...

或...这听起来很疯狂，我从未尝试过。但是，您可以使用加载屏幕，其中您可以在其中检索Languaje设置。然后...通过有条件渲染"渲染"导航器组件。IDK如果以相同的方式工作，但是您可以尝试。在我刚刚为此目的创建的一些代码

下方

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是否会在渲染中创建导航器。如果是这样。当它创建导航器时，应该在那里使用languaje