快捷導(dǎo)航

詳解React?Native項(xiàng)目中啟用Hermes引擎

更新時間：2022年09月21日 10:32:15 作者：xiangzhihong

這篇文章主要為大家介紹了React?Native項(xiàng)目中啟用Hermes引擎實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

目前，最新版本的React Native（0.70.0及以上版本）已經(jīng)默認(rèn)開啟了Hermes引擎。而Hermes則是專門針對React Native應(yīng)用而優(yōu)化的全新JavaScript引擎，啟用Hermes引擎可以優(yōu)化啟動時間，減少內(nèi)存占用以及空間占用。

一、啟用 Hermes 引擎

1.1 Android

如果我們打開React Native項(xiàng)目的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屬性值設(shè)置成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中添加如下的混淆規(guī)則。

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

然后，使用如下的命令重新編譯項(xiàng)目，并運(yùn)行項(xiàng)目。

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

1.2 iOS

從React Native 0.64開始，Hermes也支持在iOS上運(yùn)行。要啟用Hermes for iOS，需要打開iOS/Podfile文件，并進(jìn)行如下更改。

   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。完成上述配置之后，再使用下面的命令重新運(yùn)行項(xiàng)目。

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

如果iOS使用的是Mac M1的架構(gòu)，可能還會遇到Cocoapods 的一些兼容問題。如果在安裝 pods依賴時出現(xiàn)問題，可以嘗試運(yùn)行下面的命令：

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

以上命令會安裝ffi包，用于在安裝和裝載 pods 時調(diào)用合適的系統(tǒng)架構(gòu)。

二、Hermes 引擎使用

2.1 檢查 Hermes 引擎是否啟用

如果我們創(chuàng)建了一個新的React Native應(yīng)用程序，想要在應(yīng)用中查看是否啟用Hermes，那么可以使用下面的方式。

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

想要體驗(yàn)開啟Hermes帶來的好處，可以嘗試重新運(yùn)行項(xiàng)目來進(jìn)行對比。

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

2.2 綁定Hermes

從React Native 0.69開始，每個版本的React Native都會綁定一個Hermes版本。每當(dāng)我們發(fā)布React Native的新版本時，官方都會為開發(fā)者構(gòu)建一個Hermes的版本，目的是確保使用的Hermes版本與React Native版本的完全兼容。

這是因?yàn)椋瑥臍v史上版本來看，我們在匹配Hermes的版本和React Native的版本時遇到過兼容性問題。為了完全消除這類問題，我們?yōu)殚_發(fā)者提供了一個與特定React Native版本兼容的JS引擎。

同時，這些更改對React Native開發(fā)者是完全透明的，您仍然可以根據(jù)配置來啟用/禁用Hermes引擎。

2.3 使用DevTools在Hermes上調(diào)試JS

Hermes通過實(shí)現(xiàn)Chrome檢查器協(xié)議來支持Chrome調(diào)試器，這意味著，我們可以直接使用Chrome的DevTools工具來直接調(diào)試運(yùn)行JavaScript代碼。

同時，Chrome通過Metro連接運(yùn)行在設(shè)備上的Hermes，所以我們需要知道Metro監(jiān)聽的端口。通常，默認(rèn)的監(jiān)聽地址是localhost:8081，不過這都是可以配置的。當(dāng)運(yùn)行yarn啟動時，該地址在啟動時被寫入stdout。

一旦我們知道了Metro服務(wù)器監(jiān)聽的端口，接下來就可以使用以下步驟連接Chrome：