首页指南参考教程

使用 Hermes 引擎

有关在 Expo 项目中为 Android 和 iOS 配置 Hermes 的指南。


Hermes 是一个针对 React Native 优化的 JavaScript 引擎。通过提前将 JavaScript 编译为字节码,Hermes 可以缩短你的应用启动时间。Hermes 的二进制大小也比其他 JavaScript 引擎小,例如 JavaScriptCore (JSC)。它还在运行时使用更少的内存,这对于低端 Android 设备尤其有价值。

¥Hermes is a JavaScript engine optimized for React Native. By compiling JavaScript into bytecode ahead of time, Hermes can improve your app start-up time. The binary size of Hermes is also smaller than other JavaScript engines, such as JavaScriptCore (JSC). It also uses less memory at runtime, which is particularly valuable on lower-end Android devices.

支持

¥Support

Hermes 引擎是 Expo 使用的默认 JavaScript 引擎,所有 Expo 工具都完全支持它。

¥The Hermes engine is the default JavaScript engine used by Expo and it is fully supported across all Expo tooling.

在特定平台上切换 JavaScript 引擎

¥Switch JavaScript engine on a specific platform

你可能想在一个平台上使用 Hermes,而在另一平台上使用 JSC。一种方法是在顶层将 "jsEngine" 设置为 "hermes",然后使用 "ios" 键下的 "jsc" 覆盖它。在这种情况下,你可能更愿意仅在 "android" 键上显式设置 "hermes"

¥You may want to use Hermes on one platform and JSC on another. One way to do this is to set the "jsEngine" to "hermes" at the top level and then override it with "jsc" under the "ios" key. You may alternatively prefer to explicitly set "hermes" on just the "android" key in this case.

{
  "expo": {
    "jsEngine": "hermes",
    "ios": {
      "jsEngine": "jsc"
    }
  }
}

发布更新

¥Publish updates

使用 eas updatenpx expo export 发布更新将生成 Hermes 字节码包及其源映射。

¥Publishing updates with eas update and npx expo export will generate Hermes bytecode bundles and their source maps.

请注意,不同 Hermes 版本之间的 Hermes 字节码格式可能会发生变化 - 为特定版本的 Hermes 生成的更新不会在不同版本的 Hermes 上运行。从 Expo SDK 46(React Native 0.69)、Hermes 打包在 React Native 中 开始。更新 React Native 版本或 Hermes 版本可以被视为与更新任何其他原生模块相同的方式。因此,如果你更新 react-native 版本,你还应该更新 app.json 中的 runtimeVersion。如果你不这样做,你的应用可能会在启动时崩溃,因为更新可能是由使用与更新的字节码格式不兼容的旧 Hermes 版本的现有二进制文件加载的。请参阅 runtimeVersion 了解更多信息。

¥Please note that the Hermes bytecode format may change between different Hermes versions — an update produced for a specific version of Hermes will not run on a different version of Hermes. Starting from Expo SDK 46 (React Native 0.69), Hermes is bundled within React Native. Updating React Native version or Hermes version can be thought of in the same way as updating any other native module. So if you update the react-native version you should also update the runtimeVersion in app.json. If you don't do this, your app may crash on launch because the update may be loaded by an existing binary that uses an older Hermes version that is incompatible with the updated bytecode format. See runtimeVersion for more information.

JavaScript 调试器

¥JavaScript debugger

要调试使用 Hermes 运行的 JavaScript 代码,你可以使用 npx expo start 启动项目,然后按 j 在 Google Chrome 或 Microsoft Edge 中打开调试器。开发版本和 Expo Go 的开发者菜单也有 Open JS Debugger 选项来执行相同的操作。

¥To debug JavaScript code running with Hermes, you can start your project with npx expo start then press j to open the debugger in Google Chrome or Microsoft Edge. The developer menu of development builds and Expo Go also have the Open JS Debugger option to do the same.

或者,你可以使用以下工具中的 JavaScript 检查器:

¥Alternatively, you can use the JavaScript inspector from the following tools:

  • 手动打开 Google Chrome 开发者工具

    ¥Open Google Chrome DevTools manually

  • 实验性新 React Native 调试器

    ¥Experimental new React Native debugger

故障排除

¥Troubleshooting

打开调试器时的 No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine.
  • 确保你 jsEngine 字段设立 Hermes

    ¥Make sure you set up Hermes in the jsEngine field.

  • 如果你的应用是由 eas buildnpx expo run:androidnpx expo run:ios 构建的,请确保它是调试版本。

    ¥If your app is built by eas build, npx expo run:android or npx expo run:ios, make sure it is a debug build.

  • 在内部,应用将建立 WebSocket 连接,确保你的应用已连接到开发服务器。

    ¥Internally, the app will establish a WebSocket connection, make sure your app is connected to the development server.

    • 尝试通过在 Expo CLI 终端 UI 中按 r 来重新加载应用。

      ¥Try to reload the app by pressing r in the Expo CLI Terminal UI.

    • 通过运行以下命令测试调试可用性:curl http://127.0.0.1:8081/json/list(调整 127.0.0.1:8081 以匹配你的开发服务器 URL)。HTTP 响应应该是一个数组,如下所示。如果是空响应,请将 --localhost--tunnel 标志添加到 npx expo start 命令中。

      ¥Test debugging availability by running the command: curl http://127.0.0.1:8081/json/list (adjust the 127.0.0.1:8081 to match your dev server URL). The HTTP response should be an array, as shown below. If it is an empty response, add either the --localhost or --tunnel flag to the npx expo start command.

    [
      {
        "id": "0-2",
        "description": "host.exp.Exponent",
        "title": "Hermes ABI47_0_0React Native",
        "faviconUrl": "https://react.nodejs.cn/favicon.ico",
        "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D2",
        "type": "node",
        "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=2",
        "vm": "Hermes"
      },
      {
        "id": "0--1",
        "description": "host.exp.Exponent",
        "title": "React Native Experimental (Improved Chrome Reloads)",
        "faviconUrl": "https://react.nodejs.cn/favicon.ico",
        "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D-1",
        "type": "node",
        "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=-1",
        "vm": "don't use"
      }
    ]
    

我可以使用 Hermes 进行远程调试吗?

¥Can I use Remote Debugging with Hermes?

远程调试 的众多限制之一是它不能与构建在 JSI 之上的模块一起使用,例如 react-native-reanimated 版本 2 或更高版本。

¥One of the many limitations of remote debugging is that it does not work with modules built on top of JSI, such as react-native-reanimated version 2 or higher.

Hermes 支持 Chrome 开发者工具协议 通过连接到设备上运行的引擎来就地调试 JavaScript,而不是远程调试(在桌面 Chrome 选项卡中执行 JavaScript)。当你在 Expo Go 或开发版本中打开调试器时,Hermes 应用会自动使用此调试技术。

¥Hermes supports Chrome DevTools Protocol to debug JavaScript in place by connecting to the engine running on the device, as opposed to remote debugging, which executes JavaScript within a desktop Chrome tab. Hermes apps use this debugging technique automatically when you open the debugger in Expo Go or a development build.

Expo 中文网 - 粤ICP备13048890号