React Native嵌套导航报错：navigation.openDriver is not a function

问题原因 #

当你把Drawer.Navigator嵌套在Stack.Navigator内部时，当前组件拿到的navigation对象属于外层的Stack导航，并没有直接的openDrawer方法，所以会抛出方法不存在的错误。

解决方案 #

1. 确保在Drawer导航的子页面中调用方法 #

如果按钮所在组件是Drawer.Navigator下的screen页面，直接用useNavigation获取导航对象即可：

import { useNavigation } from '@react-navigation/native';

function DrawerScreen() {
  const navigation = useNavigation();

  return (
    <Button onPress={() => navigation.openDrawer()} title="打开抽屉" />
  );
}

2. 在Stack页面中调用Drawer的方法 #

如果按钮在Stack的其他页面里，需要获取Drawer导航的父实例：

• 先给Drawer.Navigator指定唯一id：

<Drawer.Navigator id="MainDrawer">
  {/* Drawer的子页面 */}
</Drawer.Navigator>

• 再在Stack页面中通过getParent获取Drawer导航对象并调用方法：

function StackScreen() {
  const navigation = useNavigation();

  const openDrawer = () => {
    const drawerNav = navigation.getParent('MainDrawer');
    drawerNav?.openDrawer();
  };

  return (
    <Button onPress={openDrawer} title="打开抽屉" />
  );
}

3. 使用专用Hook（React Navigation 6+） #

React Navigation 6及以上版本提供了useDrawerNavigation Hook，可直接获取Drawer导航对象：

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

function AnyScreen() {
  const drawerNav = useDrawerNavigation();

  return (
    <Button onPress={() => drawerNav.openDrawer()} title="打开抽屉" />
  );
}

额外检查 #

• 确认已安装@react-navigation/drawer依赖：

npm install @react-navigation/drawer
# 或
yarn add @react-navigation/drawer

• 检查代码拼写（错误提示里的openDriver大概率是笔误，确保代码中是openDrawer）

内容的提问来源于stack exchange，提问作者A.Hvozdzeu