React Navigation调用DrawerOpen时抽屉未打开反而跳转至初始路由

你遇到的问题是因为外层StackNavigator的navigation对象无法直接触发内层DrawerNavigator的抽屉操作：当你调用navigation.navigate('DrawerOpen')时，StackNavigator会尝试在自身的路由列表里查找名为DrawerOpen的页面，找不到的情况下就默认跳转到了DrawerNavigator的初始路由（social页面），这是1.x版本嵌套导航器的常见适配问题。

下面是两种可行的解决方案，优先推荐第一种：

方案一：使用DrawerActions直接分发抽屉操作 #

在react-navigation 1.x中，我们可以通过DrawerActions直接发送打开/关闭/切换抽屉的action，绕过外层StackNavigator的路由查找逻辑，直接触发内层DrawerNavigator的行为。

步骤如下：

1. 首先导入DrawerActions：

import { DrawerActions } from 'react-navigation';

2. 修改你的headerLeft点击事件，用dispatch替代navigate：

headerLeft: <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
    <Image source={require('./../images/menu.png')} style={styles.drawerIcon} />
</TouchableOpacity>,

• toggleDrawer()会自动切换抽屉的打开/关闭状态；如果需要强制打开或关闭，可以分别使用DrawerActions.openDrawer()或DrawerActions.closeDrawer()。

方案二：确保导航上下文正确传递（备选） #

如果你的组件是DrawerNavigator的直接子页面（比如socialstack），也可以尝试通过navigation对象的router属性触发，但这种写法相对繁琐，不如第一种方案直观：

onPress={() => {
  const drawerNavigation = navigation.router.getStateForAction(
    DrawerActions.toggleDrawer(),
    navigation.state
  );
  if (drawerNavigation) {
    navigation.dispatch({
      type: 'Navigation/NAVIGATE',
      routeName: 'HomeChildData',
      params: { ...drawerNavigation.routes[0].params },
    });
  }
}}

为什么原来的方法无效？ #

你的根导航是StackNavigator，HomeChildData是它的一个子路由，对应的屏幕是DrawerNavigator。当你在子组件中调用navigation.navigate('DrawerOpen')时，这个请求是发给外层StackNavigator的，但StackNavigator的路由配置里并没有DrawerOpen这个页面，所以它会默认跳转到HomeChildData的初始路由（也就是你设置的social），这就是你看到的跳转现象。

内容的提问来源于stack exchange，提问作者Davis