在HOC中调用navigation.navigate('DrawerOpen')无法打开抽屉菜单

Hey，我来帮你搞定这个抽屉打不开的问题！先看看你代码里的几个小问题，再给你几个靠谱的解决方案：

首先，先修正代码里的明显错误 #

你写的点击事件里最后有个props.naviga...，这明显是拼写截断了，应该是props.navigation，这个小错误会导致点击时直接报错，抽屉自然打不开，先把这个修正过来。

方案1：用React Navigation官方推荐的方法打开抽屉 #

不同版本的React Navigation，打开抽屉的API不一样，别再用navigate('DrawerOpen')这种旧写法啦：

• 如果是React Navigation 5.x/6.x：直接调用navigation.openDrawer()就好，这是官方现在推荐的写法：

<TouchableWithoutFeedback onPress={() => {
  props.navigation.openDrawer();
}}>

• 如果是React Navigation 4.x及更早版本：需要用DrawerActions来dispatch动作，记得先导入：

import { DrawerActions } from 'react-navigation-drawer';

// 点击事件里改成这样：
<TouchableWithoutFeedback onPress={() => {
  props.navigation.dispatch(DrawerActions.openDrawer());
}}>

方案2：确保导航结构和Props传递正确 #

你的Header是在HOC里的，得确保HOC把navigation props正确传递给了Header组件！比如你的HOC应该是这样的：

const withHeader = (WrappedComponent) => {
  return (props) => (
    <View style={{ flex: 1 }}>
      {/* 这里必须把navigation传递给Header */}
      <Header navigation={props.navigation} />
      <WrappedComponent {...props} />
    </View>
  );
};

要是HOC没把navigation传进去，Header里的props.navigation就是undefined，自然调用不了打开抽屉的方法。

方案3：检查导航嵌套结构 #

最后确认一下，你的屏幕是不是真的被包裹在DrawerNavigator里面了？如果屏幕不在Drawer导航的层级里，navigation对象根本没有打开抽屉的权限，这时候得调整你的导航结构，把需要触发抽屉的屏幕放到DrawerNavigator的子组件里。

按照上面的步骤排查，应该就能解决抽屉打不开的问题啦！

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