菜单

Hermes 集成

相关源文件

本文档介绍了 Hermes JavaScript 引擎如何集成到 React Native 中。它涵盖了 Hermes 在不同平台的构建过程、Hermes 工件如何与 React Native 打包,以及 Hermes 在 React Native 架构中的运行时集成。

有关原生模块与 JavaScript 接口的信息,请参阅 TurboModule 系统

Hermes 概述

Hermes 是 Meta 专为 React Native 开发的、针对移动应用程序优化的 JavaScript 引擎。与 JSC(JavaScriptCore)等其他 JavaScript 引擎相比,它能提供更快的启动时间、更低的内存占用和更小的应用体积。

Hermes 的主要特性

  • 将 JavaScript 预编译为字节码
  • 轻量级的 JavaScript 实现,专注于 React Native 的需求
  • 集成 JavaScript 调试器
  • 支持大多数 ECMAScript 标准
  • 通过字节码格式减小应用二进制体积

Hermes 在 React Native 架构中的作用

来源

Hermes 构建过程

Hermes 的构建过程为多个平台(iOS、Android、macOS、Windows)生成二进制文件,并集成到 React Native 的构建系统中。

构建组件和架构

来源

Hermes 的 CI/CD 工作流

React Native 使用 GitHub Actions 为其 CI/CD 流程中不同平台的 Hermes 进行构建。工作流包含几个关键步骤:

  1. 准备:检索 Hermes 版本并准备工作区
  2. 构建 HermesC:为宿主平台构建 Hermes 编译器
  3. 构建切片:为每个目标平台(iOS、Android 等)构建 Hermes
  4. 打包:为分发打包 Hermes 二进制文件

工作流作业和依赖关系

作业描述依赖项
prepare_hermes_workspace设置 Hermes 工作区并确定版本
build_hermesc_apple为 Apple 平台构建 Hermes 编译器prepare_hermes_workspace
build_apple_slices_hermes为各种 Apple 平台(iOS、macOS 等)构建 Hermesbuild_hermesc_apple
build_hermes_macos为 macOS 打包 Hermesbuild_apple_slices_hermes
build_hermesc_linux为 Linux 构建 Hermes 编译器prepare_hermes_workspace
build_hermesc_windows为 Windows 构建 Hermes 编译器prepare_hermes_workspace
build_npm_package将 Hermes 工件打包到 React Native npm 包中所有 Hermes 构建作业

来源

Hermes 在 React Native 包中的集成

打包流程

CI 过程中构建的 Hermes 二进制文件会被打包到 React Native npm 包中。这由工作流中的 build_npm_package 作业处理。

来源

目录结构

Hermes 二进制文件存储在 React Native 包内的特定位置:

  • Hermes 编译器二进制文件packages/react-native/sdks/hermesc/{platform}-bin/
  • Hermes 运行时 Tarballpackages/react-native/ReactAndroid/external-artifacts/artifacts/
  • 调试符号文件packages/react-native/ReactAndroid/external-artifacts/artifacts/

来源

运行时集成

Android 集成

在 Android 上,Hermes 被包含为一个原生库(libhermes.so),在 React Native 初始化时在运行时加载。

集成通过几个关键组件实现:

  1. DefaultNewArchitectureEntryPoint:控制 Hermes 的启用(默认为 true)
  2. DefaultSoLoader:加载包括 Hermes 在内的原生库
  3. DefaultTurboModuleManagerDelegate:提供 JavaScript 模块解析机制

来源

iOS 集成

在 iOS 上,Hermes 被集成作为一个框架,通过 CocoaPods 进行链接。

React Native 的 CocoaPods 设置根据 USE_HERMES 环境变量条件性地包含 Hermes。

来源

CMake 集成

Hermes 使用 CMake 集成到 React Native 的构建系统中。该集成支持 Hermes 的构建过程和运行时链接。

Android 原生模块构建系统

来源

功能标志和配置

Hermes 可以通过 React Native 中的功能标志来启用或禁用。默认情况下使用 Hermes,但也可以切换到 JavaScriptCore。

启用/禁用 Hermes

在 Android 上,Hermes 可以通过 DefaultNewArchitectureEntryPoint.load() 方法控制。

在 iOS 上,Hermes 可以通过 Podfile 中的环境变量进行控制。

来源

测试与验证

React Native 包含全面的测试套件,以验证 Hermes 在各个平台上的集成情况。

端到端测试

CI 过程包含端到端测试,以验证 Hermes 集成是否正常工作。

测试平台描述
test_e2e_ios_rntesteriOS在 iOS 上测试 RNTester 应用与 Hermes
test_e2e_android_rntesterAndroid在 Android 上测试 RNTester 应用与 Hermes
test_ios_helloworldiOS在 iOS 上测试 HelloWorld 模板与 Hermes
test_android_helloworldAndroid在 Android 上测试 HelloWorld 模板与 Hermes

来源

故障排除

Hermes 集成的常见问题包括:

  1. Hermes 二进制文件丢失:验证 Hermes 构件是否已正确打包在您的 React Native 版本中
  2. 版本不匹配:确保 Hermes 版本与 React Native 版本匹配
  3. 构建失败:检查特定于平台的构建问题,尤其是较新平台版本的问题

要调试 Hermes 问题,检查原生日志通常能提供有关运行时错误和崩溃的宝贵信息。

来源