React Native使用navigator时报Invalid hook call错误如何排查？

1. 核心代码逻辑错误 #

你当前的Drawer.Screen没有传入必填的name和component属性，React Navigation在渲染屏幕时内部hook调用逻辑不符合React hook规则，触发报错。

2. 依赖版本不兼容 #

你当前项目使用的React版本为16.13.1、React Native版本为0.63.2，而@react-navigation/drawer 6.x及以上版本要求React版本≥17.0.0，如果安装了高版本的导航相关依赖，会因为版本不匹配触发hook调用错误。

3. 缺失导航必要依赖 #

Drawer导航依赖react-native-gesture-handler、react-native-reanimated、react-native-safe-area-context、@react-native-community/masked-view这些库，未正确安装对应兼容版本也会触发该错误。

• 补全Drawer.Screen必填参数，修改遍历部分代码：

{
  DrawerItems.map(drawer => <Drawer.Screen 
    key={drawer.name}
    name={drawer.name}
    component={drawer.component} // 对应你要渲染的页面组件
  />)
}

• 校验导航依赖版本，运行npm list @react-navigation/native @react-navigation/drawer查看版本，若为6.x及以上，降级到5.x版本：

npm install @react-navigation/native@5.x @react-navigation/drawer@5.x

• 安装所有缺失的Drawer导航依赖：

npm install react-native-gesture-handler react-native-reanimated@2.x react-native-safe-area-context @react-native-community/masked-view

• 清除项目缓存后重启：

expo start -c

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