Как передать параметры в DrawerNavigator?

Question

TLD R: У меня есть экран входа в систему, где пользователь входит в систему и переходит ко второму экрану. Там я хочу открыть меню и сделать так, чтобы имя пользователя отображалось в виде текста. Как я могу передать имя пользователя в меню? (DrawerNavigator).

Некоторые примеры моего кода ниже.

маршрутизатор:

import MyMenu from './MyMenu';

const MyStack = StackNavigator({
  Login: {screen: Login},
  Home: {screen: Home}
  // more screens...
});

export const MyDrawer = DrawerNavigator({
  Main: { screen: MyStack }
},
  { contentComponent: MyMenu }
);

Домашний экран:

openMenu() {
  this.props.navigation.navigate('DrawerOpen', userName);
}

MyMenu:

render() {
  const userName = this.props.navigation.state.params;
  return (
    <View>
          <Text>{userName}</Text>
          // more stuff
    </View>
  );
}

Answer 1

Я думаю, что это то, что вы хотите.

import MyMenu from './MyMenu';

const MyStack = StackNavigator({
  Login: {screen: Login},
  Home: {screen: Home}
  // more screens...
});

export const MyDrawer = DrawerNavigator({
  Main: { screen:({navigation}) => <MyStack screenProps={drawerNavigation:navigation}/> }
},
  { contentComponent: MyMenu }
);

Затем вы можете получить доступ к навигации ящика с помощью стека навигации, как показано ниже.

this.props.screenProps.drawerNavigation.DO_WHATEVER

Answer 2

Вам необходимо передать реквизиты для вашего компонента MyMenu:

маршрутизатор:

    export const MyDrawer = DrawerNavigator({
      Main: { screen: MyStack }
    },
      { contentComponent: (props) => <MyMenu {...props} /> }
    );

Домашний экран:

openMenu() {
  this.props.navigation.navigate('DrawerOpen', {userName: userName});
}

Answer 3

Хорошо, потратив так много времени на это, я наконец нашел решение. Проще говоря, вы можете отправлять реквизиты навигации только при переходе на новый экран - "DrawerOpen" не учитывается.

Чтобы решить эту проблему, мне пришлось немного изменить структуру, вместо DrawerNavigator в качестве корневого ящика, у меня StackNavigator в качестве корневого ящика.

До:

const MyStack = StackNavigator({
  Login: {screen: Login},
  Home: {screen: Home}
  // more screens...
});

export const MyDrawer = DrawerNavigator({
  Main: { screen: MyStack }
},
  { contentComponent: MyMenu }
);

После:

const MyStack = StackNavigator({
  Home: {screen: Home},
  // more screens...
});

const MyDrawer = DrawerNavigator({
  Main: { screen: MyStack }
},
  { contentComponent: MyMenu }
);

export const RootStack = StackNavigator({
  Login: {screen: Login},
  Drawer: {
     screen: MyDrawer,
     navigationOptions: { header: null } } //prevent double header
});

Теперь на экране входа в систему я перехожу к Drawer следующим образом:

_login() {
    this.props.navigation.navigate('Drawer', { userName: userName });
}

И, наконец, в MyMenu (который является частью "Drawer"):

render() {
  const { userName } = this.props.navigation.state.params;
  return (
    <View>
          <Text>{userName}</Text>
          // more stuff
    </View>
  );
}

Оно работает!