Expo RN自定义Drawer组件失败求助：DrawerNavigator配置报错

我明白你折腾好几个小时调试自定义Drawer组件的崩溃有多头疼——我之前也在React Navigation的Drawer配置上踩过不少类似的坑，尤其是版本差异和配置字段写错这两个点最容易出问题。结合你的描述，我整理了几个最可能的解决方案：

1. 先确认React Navigation版本（重中之重） #

很多旧文档和网上示例用的是React Navigation v4的写法，但现在Expo默认集成的基本都是v5及以上版本，两者的Drawer配置API完全不一样：

• 如果是v5+版本：旧的DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)已经被废弃，必须用createDrawerNavigator配合组件式的Drawer.Navigator来配置，自定义Drawer要通过drawerContent属性传入：

  import { createDrawerNavigator } from '@react-navigation/drawer';
  import { NavigationContainer } from '@react-navigation/native';
  import CustomDrawer from './path/to/CustomDrawer';
  
  const Drawer = createDrawerNavigator();
  
  export default function App() {
    return (
      <NavigationContainer>
        <Drawer.Navigator
          drawerContent={(props) => <CustomDrawer {...props} />} // 传入自定义Drawer
          drawerStyle={{ width: 280 }} // 其他抽屉样式配置
        >
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Settings" component={SettingsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
  

• 如果是v4版本：要使用createDrawerNavigator，并且自定义Drawer要通过contentComponent字段配置（不是v5+的drawerContent），最后还要用createAppContainer包裹：

  import { createAppContainer } from 'react-navigation';
  import { createDrawerNavigator } from 'react-navigation-drawer';
  import CustomDrawer from './path/to/CustomDrawer';
  
  const AppDrawer = createDrawerNavigator(
    {
      Home: { screen: HomeScreen },
      Settings: { screen: SettingsScreen },
    },
    {
      contentComponent: CustomDrawer, // v4专属配置字段
      drawerWidth: 280,
    }
  );
  
  export default createAppContainer(AppDrawer);
  

2. 检查自定义Drawer组件的写法 #

自定义Drawer必须正确接收并使用导航props，否则会出现“navigation未定义”之类的错误。如果要保留抽屉的基础功能（比如页面跳转、关闭抽屉），建议结合官方内置的组件来写：

import { View, Text, TouchableOpacity } from 'react-native';
import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';

function CustomDrawer(props) {
  return (
    <DrawerContentScrollView {...props}>
      {/* 自定义头部区域 */}
      <View style={{ padding: 20, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>我的账户</Text>
      </View>
      
      {/* 官方内置的DrawerItem，自带点击反馈和样式 */}
      <DrawerItem
        label="首页"
        onPress={() => props.navigation.navigate('Home')}
      />
      <DrawerItem
        label="设置"
        onPress={() => props.navigation.navigate('Settings')}
      />
      
      {/* 完全自定义的菜单选项 */}
      <TouchableOpacity 
        style={{ padding: 15, marginHorizontal: 10 }}
        onPress={() => {
          props.navigation.closeDrawer();
          // 执行其他逻辑
        }}
      >
        <Text>退出登录</Text>
      </TouchableOpacity>
    </DrawerContentScrollView>
  );
}

export default CustomDrawer;

3. 根据红色错误界面精准定位问题 #

红色错误提示是最直接的线索：

• 如果提示Unknown option 'drawerContent' passed to createDrawerNavigator：说明你用了v5+的配置字段，但实际是v4版本，换成contentComponent即可。
• 如果提示Cannot read property 'navigation' of undefined：说明自定义Drawer组件没接收到props，检查是否在配置时正确传递了props（比如drawerContent={(props) => <CustomDrawer {...props} />}）。
• 如果提示Module not found：可能是没安装@react-navigation/drawer，执行expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated补全依赖。

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