React Native中navigation.openDrawer报错：无法读取undefined的openDrawer属性

我帮你梳理了代码里的问题，这个报错主要来自两个核心原因：一是你的MainHeader组件没拿到有效的navigation对象，二是整个导航结构里抽屉导航（DrawerNavigator）没有作为顶层导航被集成，导致当前页面的navigation不具备openDrawer方法。下面是具体的修复步骤：

步骤1：给MainHeader传递正确的navigation对象 #

在HomeScreen里，你渲染MainHeader的时候没有传入navigation属性，而MainHeader需要依赖这个属性调用openDrawer。修改HomeScreen代码：

import React from 'react';
import {ScrollView, View} from 'react-native';
import MainHeader from '../components/Header/MainHeader';
import TitleHeader from '../components/Header/TitleHeader';
import MenuSlider from '../components/Home/MenuSlider';
import {Top_Sell, POPULAR} from '../data';
import SectionHeader from '../components/Header/SectionHeader';
import PopularList from '../components/Home/PopularList';

// 接收navigation参数
const HomeScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, backgroundColor: '#fbfbfb'}}>
      {/* 将navigation传递给MainHeader */}
      <MainHeader navigation={navigation} />
      <TitleHeader mainTitle="Gợi ý" secondTitle="cho bạn" />
      <ScrollView showsVerticalScrollIndicator={false}>
        <MenuSlider list={Top_Sell} />
        <SectionHeader title="Phổ biến" buttonTitle="More" onPress={() => {}} />
        <PopularList list={POPULAR} />
      </ScrollView>
    </View>
  );
};

export default HomeScreen;

步骤2：重构导航结构，让Drawer作为顶层容器 #

目前你的MainNavigator是应用主入口，但抽屉导航MainDrawNavigator是独立的，没有被整合到主导航栈中。我们需要把包含Stack和Tab的MainNavigator嵌套到DrawerNavigator里，让整个导航结构变成Drawer -> Stack -> Tab，这样页面的navigation对象才会包含openDrawer方法。

修改MainNavigator（移除重复的NavigationContainer） #

NavigationContainer在应用中只能存在一个，我们把它移到DrawerNavigator里，修改MainNavigator.js：

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {StatusBar} from 'react-native';
import TabNavigator from './TabNavigator';

const Stack = createStackNavigator();
const MainNavigator = () => {
  return (
    <>
      <StatusBar hidden />
      <Stack.Navigator>
        <Stack.Screen
          name="Root"
          component={TabNavigator}
          options={{
            headerShown: false,
            useNativeDriver: true,
            gestureEnabled: false,
          }}
        />
      </Stack.Navigator>
    </>
  );
};

export default MainNavigator;

修改DrawNavigator（嵌套MainNavigator） #

更新DrawNavigator.js，把MainNavigator作为抽屉导航的主页面：

import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import MainNavigator from './MainNavigator'; // 引入主导航

const Drawer = createDrawerNavigator();
const MainDrawNavigator = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Main">
        {/* 将MainNavigator作为抽屉的核心页面 */}
        <Drawer.Screen name="Main" component={MainNavigator} />
        {/* 这里可以添加其他抽屉菜单选项 */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default MainDrawNavigator;

更新App入口 #

确保你的应用入口文件（比如App.js）渲染的是MainDrawNavigator，而非原来的MainNavigator：

import MainDrawNavigator from './navigation/DrawNavigator';

export default function App() {
  return <MainDrawNavigator />;
}

额外检查项 #

如果修改后仍报错，确认你已正确安装抽屉导航依赖：

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

同时完成原生端配置：iOS执行pod install，Android按照官方文档配置gradle文件。

这样调整后，MainHeader里的navigation.openDrawer()就能正常调用，打开抽屉菜单了。

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