React Native导航器的本地化

Question

我正在构建一个应用程序，提示用户在第一次启动应用程序时选择他们的语言。然后使用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';）似乎没问题，但是当我尝试从存储中检索它时却没有。

有什么东西我错过了吗？我可以使用默认语言初始化导航器，然后根据重新获得的值更改标题吗？

任何帮助将不胜感激。

Answer 1

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

或者......这听起来很疯狂，我从未尝试过。但是您可以使用加载屏幕来检索语言设置。然后......通过条件渲染，你“渲染”一个导航器组件。如果它可以以相同的方式工作，但你可以试试。下面我刚刚为此目的创建的一些代码

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

             }
      );
   }
}   

再次。我不知道反应导航是否在渲染时创建导航器。如果是这样。当它创建一个导航器时，应该有在那里使用的语言