有关在 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.
¥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 update
和 npx 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 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:
¥Troubleshooting
打开调试器时的No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine.
。
¥Make sure you set up Hermes in the jsEngine
field.
如果你的应用是由 eas build
、npx expo run:android
或 npx 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"
}
]
¥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.