React Native开发问题：React Navigation中无法在DrawerContent内使用Hooks

看起来你遇到的是React Hook调用的经典问题，虽然你的DrawerContent组件本身写法符合Hook规则，但结合React Navigation的使用场景，我们可以从以下几个方向排查解决：

1. 检查React与React Native的版本兼容性 #

Hook的正常运行依赖React和渲染器（这里是React Native）版本匹配。如果两者版本差距过大，就会触发这个错误。

• 操作步骤：
  • 打开项目根目录的package.json，查看react和react-native的版本号。
  • 参考React Native官方版本兼容规则，确认两者版本是否匹配（比如React 18需要搭配React Native 0.69+）。
  • 如果版本不兼容，执行升级命令：

    # npm用户
    npm install react@最新兼容版本 react-native@最新兼容版本 --save
    # yarn用户
    yarn add react@最新兼容版本 react-native@最新兼容版本
    

2. 排查项目中是否存在多个React副本 #

如果项目依赖树中存在多个不同版本的React，会导致Hook的调用上下文混乱，引发错误。

• 操作步骤：
  • 运行命令查看React的依赖树：

    # npm用户
    npm ls react
    # yarn用户
    yarn list react
    

  • 如果输出中显示多个React版本，执行以下操作：
    1. 删除node_modules文件夹和package-lock.json（npm）/yarn.lock（yarn）文件。
    2. 在package.json中添加版本锁定配置：
       • npm用户添加overrides字段：

         "overrides": {
           "react": "^18.2.0",
           "react-dom": "^18.2.0"
         }
         

       • yarn用户添加resolutions字段：

         "resolutions": {
           "react": "^18.2.0",
           "react-dom": "^18.2.0"
         }
         

    3. 重新安装依赖：

       npm install # 或 yarn install
       

3. 调整React Navigation中drawerContent的传递方式 #

虽然你的写法本身没问题，但有时候显式地以函数形式传递drawerContent可以解决隐式的上下文问题：

修改Categories组件中的Drawer.Navigator配置：

export default function Categories() {
  return (
    <Drawer.Navigator 
      initialRouteName="Categories" 
      // 改为显式传递props的函数形式
      drawerContent={(props) => <DrawerContent {...props} />} 
      screenOptions={{headerShown:false}} 
    >
      <Drawer.Screen name="Categories" component={CategoriesScreen} />
    </Drawer.Navigator>
  );
}

4. 验证组件导入路径是否正确 #

确认你导入的DrawerContent是正确的函数组件，没有误导入其他同名文件。检查导入路径../../components/categories/index/DrawerContent是否指向你编写的那个组件文件。

如果以上步骤都尝试后仍然报错，可以尝试清除React Native的缓存：

# 清除Metro缓存
npx react-native start --reset-cache
# 清除iOS缓存（如果是iOS开发）
cd ios && pod install && cd ..

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