React Native中Flipper的Hermes Debugger插件不兼容x86设备求助

开发环境 #

• 接触React Native开发1个月，使用VS Code进行开发
• 项目依赖版本：

{
  "name": "Kurslarim",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "^0.73.18",
    "@react-native/eslint-config": "^0.73.1",
    "@react-native/metro-config": "^0.73.2",
    "@react-native/typescript-config": "^0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

问题描述 #

此前在模拟器中选择“Open Debugger”选项时，未打开Chrome调试工具，反而提示安装Flipper。安装Flipper及相关依赖后，打开时出现以下错误：

"Plugin 'Hermes Debugger (RN)' is unavailable
Device plugin 'Hermes Debugger (RN)' is not supported by the selected device 'Android SDK built for x86' (Android)"

解决思路与建议 #

1. 检查模拟器架构兼容性 #

• 当前使用的是x86架构模拟器，部分Flipper版本对该架构的Hermes调试支持有限。建议创建x86_64架构的Android模拟器（创建模拟器时选择x86_64系统镜像），重新连接Flipper测试。
• 确认项目Hermes启用状态：查看android/app/build.gradle文件，确保enableHermes配置为true（RN 0.73版本默认已启用Hermes）。

2. 匹配Flipper与React Native版本 #

RN 0.73.x需要搭配兼容版本的Flipper，建议安装Flipper v0.202.0（可参考项目内置react-native/scripts/flipper/Flipper-config.js中的指定版本）。避免安装最新版Flipper，版本不匹配是常见的插件不可用原因。

3. 重置调试环境 #

• 关闭Flipper、Metro服务及模拟器，重新启动模拟器、Metro和Flipper后再尝试连接。
• 清除Android项目缓存，重新构建：

cd android && ./gradlew clean
cd .. && npx react-native run-android

• 在Flipper中移除当前设备连接，重新扫描并连接设备。

4. 临时切换回Chrome调试 #

如果Flipper调试暂时无法解决，可以强制使用Chrome调试：

• 在模拟器开发者菜单中选择Debug with Chrome（若未显示该选项，先关闭Flipper连接，重启Metro服务后再次打开开发者菜单）。
• 打开Chrome浏览器的chrome://inspect页面，即可找到React Native应用的调试入口。

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