ReactNative在TabNavigator内使用Drawer.Navigator调用openDrawer报错

报错原因 #

你遇到的报错核心是navigation对象的作用域不匹配：
你当前调用openDrawer()的navigation是底部Tab导航的实例，而openDrawer方法只有抽屉导航自身的navigation实例，或者父级导航是抽屉导航的子页面才能访问。
你当前的导航层级是「Tab导航包裹Drawer导航」，Tab导航是Drawer的父级，自然拿不到子级Drawer的方法。同时你在Menu Tab的点击事件里拦截了默认跳转，永远不会进入DrawerStack页面，也就永远拿不到Drawer的navigation实例。

修复方案 #

方案1：调整导航层级（推荐） #

把抽屉导航作为根导航，包裹底部Tab导航，所有Tab页面的navigation就能直接继承抽屉导航的方法：

import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

// 抽离独立的Tab导航组件
function TabNavigator() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: '#e91e63',
        style: {},
        labelStyle: {margin:0},
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarLabel: 'News',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="newspaper" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Categories"
        component={CategorieStack}
        options={{
          tabBarLabel: 'Kategorien',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="format-list-bulleted-square" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Menu"
        component={() => null}
        options={{
          tabBarLabel: 'Menu',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="menu" color={color} size={size} />
          ),
        }}
        listeners={({ navigation }) => ({
          tabPress: e => {
            e.preventDefault();
            // 现在navigation父级是抽屉导航，可直接调用openDrawer
            navigation.openDrawer();
          }
        })}
      />
    </Tab.Navigator>
  )
}

// 根组件用抽屉导航包裹Tab导航
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen 
          name="MainTabs" 
          component={TabNavigator} 
          options={{headerShown: false}} 
        />
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Categories" component={Categories} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

方案2：全局Ref调用（无需调整原有层级） #

如果不想修改现有导航结构，可通过全局导航Ref直接调用抽屉方法：

1. 定义全局导航Ref

import { createNavigationContainerRef } from '@react-navigation/native';
export const navigationRef = createNavigationContainerRef();

2. 绑定Ref到NavigationContainer

<NavigationContainer ref={navigationRef}>
  {/* 保留你原有导航代码不变 */}
</NavigationContainer>

3. 修改Menu Tab的点击事件

listeners={({ navigation }) => ({
  tabPress: e => {
    e.preventDefault();
    navigationRef.current?.openDrawer();
  }
})}

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