Question

在带有Redux的React Native应用中使用react-navigation，我需要在drawerLabels中动态显示drawerNavigation，因为它们会随语言而变化。因此，我需要访问商店和道具（例如this.props.locale），但似乎无法正常工作。任何帮助表示赞赏。

我尝试过从主要父级screenProps传递appNavigator，该父级确实可以访问store，但不确定如何在drawerNavigator内部访问它们。 / p>

我真的不希望将整个导航存储在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 }}
        />
      ),
    };
  };

React Navigation-来自Redux商店的抽屉导航器所需的动态文本（翻译）

1 个答案: