如何将参数传递给 DrawerNavigator？

Question

TLDR：我有一个登录屏幕，用户可以在其中登录并导航到第二个屏幕。在那里我想打开菜单并将用户名显示为文本。如何将用户名传递给菜单？ (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);
}

我的菜单：

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

Answer 1

您需要将道具传递给您的 MyMenu 组件：

路由器：

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

主屏幕：

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

Answer 2

好吧，花了这么多时间，我终于找到了解决办法。简而言之，您只能在导航到新屏幕时发送导航道具 - '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
});

现在在登录屏幕中，我像这样导航到抽屉：

_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>
  );
}

有效！

Answer 3

我想这就是你想要的。

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 }
);

然后您可以从 Stack 导航访问抽屉导航，如下所示。

this.props.screenProps.drawerNavigation.DO_WHATEVER

如何将参数传递给 DrawerNavigator？

How to pass params to DrawerNavigator?

react-native

react-navigation