Реактивная навигация - динамический текст (переводы), необходимые в hookNavigator boxLabels из магазина Redux

Question

При использовании реагирующей навигации в приложении React Native с Redux мне нужно динамически отображать drawerLabels в drawerNavigation, поскольку они меняются в зависимости от языка. Поэтому мне нужно получить доступ к магазину и реквизиту (например, this.props.locale), но не могу заставить его работать. Любая помощь приветствуется.

Я пытался передать screenProps от основного родителя appNavigator, который имеет доступ к store, но не уверен, как получить к ним доступ внутри drawerNavigator.

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

Мой корень AppNavigator, мой settingsNavigation файл выглядит следующим образом.

    const BookingsNavigator = createStackNavigator (
    ...
    );

    ...

    const SettingsNavigator = createDrawerNavigator(
        {
            CurrentBookings: {
                screen: BookingsNavigator,
                navigationOptions: {
                    drawerLabel: 'My bookings',
                }
           },
       ...

       },

    );

const AppNavigator = createSwitchNavigator({  
    Bookings: BookingsNavigator,
   // other navigators
});

export default AppNavigator;

Answer 1

Для динамического изменения языка (на экране настроек):

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return {
      title: i18n.t('settings.settings'), // drawer label initialization
      drawerLabel: params && params.DLabel,
      drawerIcon: ({ tintColor }) => (
        <Icon name="md-settings" style={{ fontSize: 24, color: tintColor }} />
      ),
    };
  };

  // no need to preset drawer label because we define title in navigationOptions
  // componentWillMount() {
  //   this.props.navigation.setParams({ DLabel: i18n.t('settings.settings') });
  // }

  componentDidUpdate(prevProps) {
    if (prevProps.language !== this.props.language) { // redux props from language picker
      // for current screen (drawer item)
      this.props.navigation.setParams({ DLabel: i18n.t('settings.settings') });
      // home screen (drawer item)
      const setHomeLabel = NavigationActions.setParams({
        params: { DLabel: I18n.t('home') },
        key: 'Home',
      });     
      this.props.navigation.dispatch(setHomeLabel);
      // inbox screen (drawer item)
      const setInboxLabel = NavigationActions.setParams({
        params: { DLabel: i18n.t('Inbox') },
        key: 'Inbox',
      });
      this.props.navigation.dispatch(setInboxLabel);
    }
  }

Как сменить язык:

  onLanguageChange = (value) => {
    this.props.languageChanged(value); // redux action from language picker
    i18n.locale = value === 0 ? 'ru' : 'en'; // set locale manually
  };

В компоненте домашнего экрана:

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return {
      title: i18n.t('home'), // drawer label initialization
      drawerLabel: params && params.DLabel,
      drawerIcon: ({ tintColor }) => (
        <Icon
          type="Entypo"
          name="wallet"
          style={{ fontSize: 24, color: tintColor }}
        />
      ),
    };
  };