详解React Native项目中启用Hermes引擎

目录
  • 引言
  • 一、启用 Hermes 引擎
    • 1.1 Android
    • 1.2 iOS
  • 二、Hermes 引擎使用
    • 2.1 检查 Hermes 引擎是否启用
    • 2.2 绑定Hermes
    • 2.3 使用DevTools在Hermes上调试JS

引言

目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎。而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用。

一、启用 Hermes 引擎

1.1 Android

如果我们打开React Native项目的Android源码,会在app/build.gradle文件中会看到如下的代码。

if (enableHermes) {
    def hermesPath = "../../node_modules/hermes-engine/android/";
    debugImplementation files(hermesPath + "hermes-debug.aar")
    releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
   implementation jscFlavor
}

上面代码的含义是,如果开启了就采用Hermes引擎,如果未开启则使用以前的jsc引擎。所以,如果需要开启Hermes引擎,只需要将enableHermes属性值设置成true即可,如下所示。

  project.ext.react = [
      entryFile: "index.js",
-     enableHermes: false  // clean and rebuild if changing
+     enableHermes: true  // clean and rebuild if changing
  ]

另外,如果您正在使用ProGuard,还需要在ProGuard -rules.pro中添加如下的混淆规则。

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

然后,使用如下的命令重新编译项目,并运行项目。

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

1.2 iOS

从React Native 0.64开始,Hermes也支持在iOS上运行。要启用Hermes for iOS,需要打开iOS/Podfile文件,并进行如下更改。

   use_react_native!(
     :path => config[:reactNativePath],
     # to enable hermes on iOS, change `false` to `true` and then install pods
     # By default, Hermes is disabled on Old Architecture, and enabled on New Architecture.
     # You can enable/disable it manually by replacing `flags[:hermes_enabled]` with `true` or `false`.
-    :hermes_enabled => flags[:hermes_enabled],
+    :hermes_enabled => true
   )

如果需要在iOS中开启Hermes引擎,需要将上面的hermes_enabled 的值修改为 true。完成上述配置之后,再使用下面的命令重新运行项目。

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

如果iOS使用的是Mac M1的架构,可能还会遇到Cocoapods 的一些兼容问题。如果在安装 pods依赖时出现问题,可以尝试运行下面的命令:

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

以上命令会安装ffi包,用于在安装和装载 pods 时调用合适的系统架构。

二、Hermes 引擎使用

2.1 检查 Hermes 引擎是否启用

如果我们创建了一个新的React Native应用程序,想要在应用中查看是否启用Hermes,那么可以使用下面的方式。

const isHermes = () => !!global.HermesInternal;

想要体验开启Hermes带来的好处,可以尝试重新运行项目来进行对比。

npx react-native run-android --variant release
npx react-native run-ios --configuration Release

2.2 绑定Hermes

从React Native 0.69开始,每个版本的React Native都会绑定一个Hermes版本。每当我们发布React Native的新版本时,官方都会为开发者构建一个Hermes的版本,目的是确保使用的Hermes版本与React Native版本的完全兼容。

这是因为,从历史上版本来看,我们在匹配Hermes的版本和React Native的版本时遇到过兼容性问题。为了完全消除这类问题,我们为开发者提供了一个与特定React Native版本兼容的JS引擎。

同时,这些更改对React Native开发者是完全透明的,您仍然可以根据配置来启用/禁用Hermes引擎。

2.3 使用DevTools在Hermes上调试JS

Hermes通过实现Chrome检查器协议来支持Chrome调试器,这意味着,我们可以直接使用Chrome的DevTools工具来直接调试运行JavaScript代码。

同时,Chrome通过Metro连接运行在设备上的Hermes,所以我们需要知道Metro监听的端口。通常,默认的监听地址是localhost:8081,不过这都是可以配置的。当运行yarn启动时,该地址在启动时被写入stdout。

一旦我们知道了Metro服务器监听的端口,接下来就可以使用以下步骤连接Chrome:

  • 在Chrome浏览器中输入chrome://inspect。
  • 然后在Chrome浏览器中输入localhost:8081开启调试。

现在,会看到一个带有“inspect”链接的“Hermes React Native”目标,可以用来调出调试器;如果没有看到“inspect”链接,请确保Metro服务器正在运行。

现在,我们就可以使用Chrome调试工具进行代码调试了,如下图所示。

以上就是详解React Native项目中启用Hermes引擎的详细内容,更多关于React Native启用Hermes引擎的资料请关注我们其它相关文章!

(0)

相关推荐

  • React Native 的动态列表方案探索详解

    目录 背景 技术方案介绍 内存 异常处理 未来规划 背景 时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体

  • React Native可复用 UI分离布局组件和状态组件技巧

    目录 引言 包装 Context.Provider 作为父组件 使用 Context Hook 来实现子组件 使用 React 顶层 API 动态设置样式 复用 Context,实现其它子组件 抽取共同状态逻辑 自由组合父组件与子组件 示例 引言 单选,多选,是很常见的 UI 组件,这里以它们为例,来讲解如何分离布局组件和状态组件,以实现较好的复用性. 假如我们要实现如下需求: 这类 UI 有如下特点: 不管是单选还是多选,都可以有网格布局,我们可以把这个网格布局单独抽离出来,放到一个独立的组件

  • React Native采用Hermes热更新打包方案详解

    目录 1, 背景 2,热更新传统方案 3,使用Hermes打包 1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码. if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImple

  • React Native 中实现倒计时功能

    目录 正文 首次实现 最终实现 示例 正文 在 React Native,该如何实现一个倒计时功能呢? 首次实现 表面看来很简单,譬如像下面这样: const timer = useRef<ReturnType<typeof setInterval> | null>(null) const [count, setCount] = useState(0) const start = () => { setCount(10) timer.current = setInterval

  • React Native 中实现确认码组件示例详解

    目录 正文 实现原理 开源方案 正文 确认码控件也是一个较为常见的组件了,乍一看,貌似较难实现,但实则主要是障眼法. 实现原理 上图 CodeInput 组件的 UI 结构如下: <View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none&

  • 详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • 详解React Native中如何使用自定义的引用路径

    目录 RN的相对路径地狱 RN的自定义路径需要的依赖 解决自定义引用路径导致的eslint报错问题 RN的相对路径地狱 我刚接触RN时,就发现所有的demo中给出来的路径都是相对路径,我自己的练习项目中想改成自定义的绝对路径,但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了.伴随着RN的学习和开发练习,我的代码也变得越来越多,越来越复杂,我逐渐发现RN的相对路径越来越麻烦,比如我把某个文件移动到另一个不同深度的文件夹中,那么就需要把所有引用这个文件的地方

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • 详解React Native与IOS端之间的交互

    前置准备 首先最好了解一点关于 oc 的语法知识 1.创建声明文件nativeModule.h #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> @interface nativeModule : NSObject <RCTBridgeModule> @end 2.创建文件nativeModule.m #import <Foundation/Foundation.h> #i

  • 详解如何在项目中应用SpringSecurity权限控制

    目录 1.Spring Security环境准备 2.实现认证和授权 3.在控制器上实现注解鉴权 4.请求获取当前登录的用户名信息 5.用户退出 要进行认证和授权需要前面课程中提到的权限模型涉及的7张表支撑,因为用户信息.权限信息.菜单信息.角色信息.关联信息等都保存在这7张表中,也就是这些表中的数据是我们进行认证和授权的依据.所以在真正进行认证和授权之前需要对这些数据进行管理,即我们需要开发如下一些功能: 1.权限数据管理(增删改查) 2.菜单数据管理(增删改查) 3.角色数据管理(增删改查.

  • 详解C 语言项目中.h文件和.c文件的关系

    详解C 语言项目中.h文件和.c文件的关系 在编译器只认识.c(.cpp))文件,而不知道.h是何物的年代,那时的人们写了很多的.c(.cpp)文件,渐渐地,人们发现在很多.c(.cpp)文件中的声明语句就是相同的,但他们却不得不一个字一个字地重复地将这些内容敲入每个.c(.cpp)文件.但更为恐怖的是,当其中一个声明有变更时,就需要检查所有的.c(.cpp)文件. 于是人们将重复的部分提取出来,放在一个新文件里,然后在需要的.c(.cpp)文件中敲入#include XXXX这样的语句.这样即

  • React Native项目中使用Lottie动画的方法

    Lottie是Airbnb开源的一个面向iOS.Android.React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动画,完美实现炫酷的动画效果. 使用流程上,Lottie动画需要先使用Adobe After Effects做出原动画,然后再使用官方提供的Bodymovin插件把动画导出成Json文件,而这个Json文件就是Lottie需要解析的动画源文件. 在React Native项目中使用Lottie动画,需

  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    项目介绍 该组件进行封装一个时间日期选择器,同时适配Android.iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来 配置安装 npm install react-native-datetime --save 1.1.iOS环境配置 上面步骤完成之后,直接前台写js代码即可 1.2.Android环境配置 在android/setting.gradle文件中如下配置 ... include ':react-native-dateti

  • 详解在HTTPS 项目中使用百度地图 API

    百度地图 API 产品简介 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发. 百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用.接口使用无次数限制.在使用前,您需先申请密钥(ak)才可使用. 基础使用 引用百度地图 API, 将 "您的密匙" 替换为你在百度地

  • 详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

随机推荐