React Native 中如何启用 Hermes？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 React Native 项目中启用 Hermes 引擎，可以通过以下步骤实现：

对于新项目：
- 在创建新项目时，使用 --template 参数指定 Hermes 模板：
```
npx react-native init MyNewApp --template react-native-template-typescript@latest
```
- 或者在创建项目后，手动修改 android/app/build.gradle 和 ios/Podfile 文件以启用 Hermes。
对于现有项目：
- Android：在 android/app/build.gradle 文件中，找到 project.ext.react 部分，并确保 enableHermes 设置为 true：
```
project.ext.react = [
    enableHermes: true,  // 设置为 true 以启用 Hermes
]
```
- iOS：在 ios/Podfile 文件中，找到 use_react_native! 部分，并添加 :hermes_enabled => true：
```
use_react_native!(
    :hermes_enabled => true,  // 设置为 true 以启用 Hermes
)
```

重新构建项目：

对于 Android：

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

对于 iOS：

cd ios
pod install
cd ..
npx react-native run-ios

本题详细解读

什么是 Hermes？

Hermes 是 Facebook 为 React Native 开发的一个优化 JavaScript 引擎，旨在提高应用的启动速度和减少内存占用。它通过提前编译 JavaScript 代码为字节码，从而在运行时减少解析和编译时间。

为什么启用 Hermes？

性能提升：Hermes 可以显著减少应用的启动时间，特别是在低端设备上。
内存优化：Hermes 减少了 JavaScript 引擎的内存占用，使得应用在内存受限的设备上运行更加流畅。
字节码生成：Hermes 将 JavaScript 代码编译为字节码，减少了运行时的解析和编译开销。

如何验证 Hermes 是否启用？

Android：在应用的 MainApplication.java 文件中，检查是否有以下代码：

// www.javascriptcn.com code example
if (BuildConfig.DEBUG) {
    ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
        .setApplication(getApplication())
        .setBundleAssetName("index.android.bundle")
        .setJSMainModulePath("index")
        .setUseDeveloperSupport(BuildConfig.DEBUG)
        .setInitialLifecycleState(LifecycleState.RESUMED);
    if (BuildConfig.IS_HERMES_ENABLED) {
        builder.setJavaScriptEngineFactory(new HermesJSExecutorFactory());
    }
    return builder.build();
}

iOS：在应用的 AppDelegate.m 文件中，检查是否有以下代码：

#if RCT_NEW_ARCH_ENABLED
#import <React/HermesExecutorFactory.h>
#else
#import <React/JSCExecutorFactory.h>
#endif

注意事项

兼容性：Hermes 不支持所有 JavaScript 特性，因此在启用前需要确保应用代码与 Hermes 兼容。
调试：在启用 Hermes 后，调试工具可能需要额外配置，以确保调试功能正常工作。

通过以上步骤和解读，你可以在 React Native 项目中成功启用 Hermes 引擎，从而提升应用的性能。