Блог

Я создаю приложение, в котором пользователям предлагается выбрать свой язык при первом запуске приложения. Затем язык сохраняется локально с использованием 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'; ), кажется, что все в порядке, но не тогда, когда я пытаюсь извлечь его из хранилища.

Есть ли что-то, чего мне не хватает? Могу ли я инициализировать навигатор языком по умолчанию и изменить название позже на основе восстановленного значения?

Любая помощь была бы высоко оценена.

Навигаторы создаются при запуске приложения. Итак, вам нужно будет использовать некоторый текст-заполнитель и использовать метод, описанный здесь, где вы меняете все заголовки экрана на основе клавиши screen…

Или … это звучит безумно, и я никогда не пробовал это. Но вы можете использовать экран загрузки, где вы получаете настройки languaje. затем… с помощью условного отображения вы «визуализируете» компонент navigator . Я бы хотел, чтобы это работало так же, но вы можете попробовать. ниже приведен некоторый код, который я только что создал для этой цели

 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 навигатор при рендеринге. Если да. При создании навигатора должен быть язык, который там будет использоваться