【React Native】アプリにHermesを導入する

今回は、React Native アプリの速度改善として導入した Hermes についてです。
こちらは、React Native の公式サイトに記事があり、そちらを参考にさせていただきました。

Using Hermes · React Native
https://reactnative.dev/docs/hermes

 

まず、Android への導入手順についてです。
android/app/build.gradle ファイルを開き、下記を追加します。

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true  // この行を追加
]

3行目を追加、もしくは変更したら、下記コマンドを実行して Android プロジェクトをクリーンします。

cd android
gradlew clean

クリーンが完了したら、下記コマンドでアプリを実行してください。

npx react-native run-android

設定ミス等がなければ、問題なくアプリが起動するはずです。
で、肝心のアプリの速度ですが…劇的に速くなった感じはしませんでした…。
まあ、特に問題はないので、有効のままにしておこうと思います。

次は、iOS への導入方法についてです。
まず、下記コマンドを実行して Podfile を開きます。

cd ios
vi Podfile

そうしたら、下記の行を追加します。

use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true  # この行を追加
)

上記を追加し終えたら、pod install を実行して、Hermes をインストールします。
インストールが完了したら、下記コマンドで iOS アプリを実行します。

npx react-native run-ios

…が、私の環境で試したところ、上記コマンドを実行したらエラーが発生し、アプリを起動できませんでした。
pod install 実行の時点ではエラーにはならなかったのですが、何が原因なのでしょう…。
iOS は別にアプリに遅さは感じていないので、導入必須!という感じでもないのですが…使えるなら使いたいところではあります。
後々、時間を見つけて調べたいと思います。

 

以上、React Native アプリに Hermes を導入する方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG