使用React Navigation DrawerNavigation时出现ReferenceError：找不到React变量

我来帮你梳理这个问题的排查方向！从你描述的场景和报错位置来看，虽然报错指向了DrawerSidebar.js，但根源大概率出在自定义抽屉组件的写法或传递逻辑上，咱们一步步来分析：

1. 检查自定义组件的导出与引用方式 #

确保你的自定义抽屉组件是有效的React组件，并且传递方式正确：

• 如果是默认导出，直接传递组件即可：

  // 自定义抽屉组件
  export default function CustomDrawer() {
    return (
      <View style={{flex: 1, paddingTop: 50}}>
        {/* 抽屉内容，比如导航列表、用户信息等 */}
      </View>
    );
  }
  
  // 在DrawerNavigator中配置（以v4版本为例）
  const AppDrawer = createDrawerNavigator(
    { /* 路由配置 */ },
    {
      contentComponent: CustomDrawer
    }
  );
  

• 如果是命名导出，需要用箭头函数包裹或者直接引用命名组件：

  // 命名导出的组件
  export function CustomDrawer() { /* ... */ }
  
  // 配置时的正确写法
  contentComponent: () => <CustomDrawer />
  

2. 适配React Navigation版本差异 #

不同版本的React Navigation对抽屉配置项的命名有变化：

• v5+版本：已经不再使用contentComponent，而是改用drawerContent属性，并且需要手动传递props：

  import { DrawerNavigator } from '@react-navigation/drawer';
  
  const Drawer = DrawerNavigator();
  
  function App() {
    return (
      <Drawer.Navigator
        drawerContent={(props) => <CustomDrawer {...props} />}
      >
        {/* 屏幕路由配置 */}
      </Drawer.Navigator>
    );
  }
  

• 如果你用的是旧版本（v4及以下），要确认是否安装了react-navigation-drawer依赖，且组件是否正确接收了navigation等核心props。

3. 排查自定义组件的语法错误 #

报错显示在DrawerSidebar.js，但很可能是你的自定义组件在渲染时抛出了隐性错误，导致上层组件崩溃：

• 先临时替换为官方默认抽屉组件测试，看是否还报错：

  // v4版本导入默认组件
  import { DrawerItems } from 'react-navigation-drawer';
  
  // 配置时替换
  contentComponent: DrawerItems
  

• 如果替换后正常，就聚焦在自定义组件内部：检查是否有未闭合的标签、未定义的变量、错误的钩子使用等问题。

4. 确认依赖完整性与版本匹配 #

• 确保所有相关依赖都已安装，且版本相互兼容：

  # v5+版本安装命令
  npm install @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimated
  

• 可以尝试删除node_modules和锁文件，重新安装依赖，排除版本冲突问题。

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