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中描述的方法，在此方法中，您可以根据屏幕按键来更改所有屏幕标题...

或者...听起来很疯狂，但我从未尝试过。但是您可以使用加载屏幕来检索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

             }
      );
   }
}

再次。我不知道反应导航是否会在render创建导航器。如果是这样的话。当它创建一个导航器时，应该在那里使用languaje

React Native导航器的本地化

1 个答案: