React Native项目报错求助：Metro及手势处理模块相关问题

关于Metro的基础说明 #

• Metro不是Android模拟器，它是React Native专属的本地开发服务器，主要负责打包你的JavaScript代码，并将打包后的代码提供给模拟器或真机运行。
• 它没有单独的"Metro文件"，运行时是以进程形式存在，启动命令需要在你的项目根目录执行。
• 关闭Metro的方法：
  • 若Metro是在终端窗口启动的，直接按 Ctrl + C 即可终止进程；
  • 找不到对应终端时，可通过系统任务管理器（Windows）或活动监视器（Mac）找到关联的node进程并结束。
• 重启Metro的方法：
  • 切换到你的项目根目录，在终端执行命令：npx react-native start

第一个报错："Project" 未注册 #

Invariant Violation: "Project" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

解决步骤 #

• 确认Metro启动路径：检查Metro是否在当前项目根目录启动，若之前开错了文件夹，关闭Metro后回到自己项目根目录重新启动。
• 检查注册代码：打开项目的index.js（或index.android.js/index.ios.js），确保存在正确的AppRegistry.registerComponent调用，示例代码如下：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

• 清除缓存重启：执行命令 npx react-native start --reset-cache，重启Metro并清除缓存。

第二个报错：react-native-gesture-handler 相关错误 #

[react-native-gesture-handler] react-native-gesture-handler module was not found. Make sure you're running your app on the native platform and your code is linked properly (cd ios && pod install && cd ..).
LOG Running "Project" with {"rootTag":1}
ERROR Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView" was not found in the UIManager
...（重复报错信息省略）

解决步骤 #

• 重新安装依赖：执行命令 npm install react-native-gesture-handler（使用yarn则执行yarn add react-native-gesture-handler），确保依赖安装完整。
• 处理iOS依赖：进入项目的ios目录，执行 pod install，完成后回到项目根目录。
• 处理Android缓存：进入项目的android目录，执行 ./gradlew clean 清理项目缓存。
• 配置入口导入：在项目入口文件（如index.js）的最顶部添加导入语句：

import 'react-native-gesture-handler';
// 其他导入代码放在该语句之后

• 重启所有服务：关闭Metro和模拟器，重新启动Metro后，执行npx react-native run-android（Android）或npx react-native run-ios（iOS）重新运行项目。

内容的提问来源于stack exchange，提问作者عبدالرحمن الفيل