Локализация 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

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

Или ... это звучит безумно, и я никогда не пробовал. Но вы можете использовать экран загрузки, на котором вы можете получить настройки языка. затем ... с помощью условного рендеринга вы "визуализируете" компонент навигатора. ИДК, если это будет работать так же, но вы можете попробовать. ниже некоторый код, который я только что создал для этой цели

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

             }
      );
   }
}   

Снова. Я не знаю, реагирует ли навигация на создание навигатора при рендере. Если так. Когда он создает навигатор, там должен быть язык, который будет использоваться