如何正确使用MyDrawer函数？调用navigation.openDrawer不存在如何解决

核心问题原因 #

你调用openDrawer失败的根因为useNavigation()获取到的导航对象不属于抽屉导航上下文：你错误地将<MyDrawer />抽屉导航直接写在了Header组件内部，useNavigation只能获取当前组件上层最近的导航器提供的上下文，你的Header外层没有被Drawer.Navigator包裹，自然无法拿到抽屉导航专属的openDrawer方法。

修复步骤 #

1. 调整导航结构，将抽屉导航移为你需要使用抽屉功能的路由的上层导航，不要在Header中嵌套抽屉导航。示例根导航代码如下：

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Header from './Header';
import Home from '../../pages/Home';
import SignIn from '../../pages/SignIn';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        screenOptions={{
          // 全局自定义Header为你的组件
          header: () => <Header />
        }}
      >
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="log-out" component={SignIn} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

2. 修改Header组件代码，删除内部嵌套的<MyDrawer />：

import {useNavigation} from '@react-navigation/native';
import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import {Button, Container} from './styles';

const Header: React.FC = () => {
  const navigation = useNavigation();
  return (
    <Container>
      <Button onPress={navigation.goBack}>
        <Icon name="arrow-left" size={30} />
      </Button>
      <Button onPress={() => navigation.openDrawer()} >
        <Icon name="menu" size={30} />
      </Button>
    </Container>
  );
};

export default Header;

额外排查点 #

如果修改后仍报错，可排查以下场景：

• 确认@react-navigation/native和@react-navigation/drawer的主版本号一致，均为6.x及以上版本即可支持openDrawer方法
• 若使用TypeScript，需要为useNavigation指定抽屉导航的类型定义，避免类型报错：

import { DrawerNavigationProp } from '@react-navigation/drawer';

type DrawerParamList = {
  Home: undefined;
  'log-out': undefined;
};

// 在Header组件内使用时指定类型
const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();

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