メインコンテンツへスキップ

React Native Gradleプラグイン

このガイドでは、Android向けにReact Nativeアプリケーションをビルドする際に、React Native Gradleプラグイン（しばしばRNGPと呼ばれます）を設定する方法について説明します。

プラグインの使用​

React Native Gradleプラグインは、別のNPMパッケージとして配布されており、react-nativeと一緒に自動的にインストールされます。

このプラグインは、npx react-native initを使用して作成された新しいプロジェクトではすでに設定済みです。このコマンドでアプリを作成した場合、追加のインストール手順は必要ありません。

既存のプロジェクトにReact Nativeを統合する場合は、対応するページを参照してください。プラグインのインストール方法に関する具体的な手順が記載されています。

プラグインの設定​

デフォルトでは、プラグインは適切なデフォルト設定ですぐに動作します。このガイドを参照し、必要な場合にのみ動作をカスタマイズしてください。

プラグインを設定するには、android/app/build.gradle内のreactブロックを変更します。

groovy
apply plugin: "com.facebook.react"

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
  // Custom configuration goes here.
}

各設定キーについて以下で説明します。

root​

これはReact Nativeプロジェクトのルートフォルダ、つまりpackage.jsonファイルが存在する場所です。デフォルトは..です。以下のようにカスタマイズできます。

groovy
root = file("../")

reactNativeDir​

これはreact-nativeパッケージが存在するフォルダです。デフォルトは../node_modules/react-nativeです。モノレポや異なるパッケージマネージャを使用している場合は、reactNativeDirをあなたのセットアップに合わせて調整できます。

以下のようにカスタマイズできます。

groovy
reactNativeDir = file("../node_modules/react-native")

codegenDir​

これはreact-native-codegenパッケージが存在するフォルダです。デフォルトは../node_modules/react-native-codegenです。モノレポや異なるパッケージマネージャを使用している場合は、codegenDirをあなたのセットアップに合わせて調整できます。

以下のようにカスタマイズできます。

groovy
codegenDir = file("../node_modules/@react-native/codegen")

cliFile​

これはReact Native CLIのエントリポイントファイルです。デフォルトは../node_modules/react-native/cli.jsです。プラグインがアプリのバンドルや作成のためにCLIを呼び出す必要があるため、このエントリポイントファイルが必要です。

モノレポや異なるパッケージマネージャを使用している場合は、cliFileをあなたのセットアップに合わせて調整できます。以下のようにカスタマイズできます。

groovy
cliFile = file("../node_modules/react-native/cli.js")

debuggableVariants​

これはデバッグ可能なバリアントのリストです（バリアントに関する詳細はバリアントの使用を参照）。

デフォルトでは、プラグインはdebugのみをdebuggableVariantsと見なしますが、releaseはそうではありません。他のバリアント（staging、liteなど）がある場合は、これに応じて調整する必要があります。

debuggableVariantsとしてリストされたバリアントにはバンドルが含まれないため、実行するにはMetroが必要です。

以下のようにカスタマイズできます。

groovy
debuggableVariants = ["liteDebug", "prodDebug"]

nodeExecutableAndArgs​

これは、すべてのスクリプトに対して呼び出されるnodeコマンドと引数のリストです。デフォルトは[node]ですが、以下のように追加のフラグをカスタマイズできます。

groovy
nodeExecutableAndArgs = ["node"]

bundleCommand​

これは、アプリのバンドルを作成する際に呼び出されるbundleコマンドの名前です。RAMバンドルを使用している場合に便利です。デフォルトはbundleですが、以下のように追加のフラグをカスタマイズできます。

groovy
bundleCommand = "ram-bundle"

bundleConfig​

これは、指定された場合にbundle --config <file>に渡される設定ファイルのパスです。デフォルトは空です（設定ファイルは提供されません）。バンドル設定ファイルに関する詳細は、CLIのドキュメントに記載されています。以下のようにカスタマイズできます。

groovy
bundleConfig = file(../rn-cli.config.js)

bundleAssetName​

これは生成されるべきバンドルファイルの名前です。デフォルトはindex.android.bundleです。以下のようにカスタマイズできます。

groovy
bundleAssetName = "MyApplication.android.bundle"

entryFile​

バンドル生成に使用されるエントリファイルです。デフォルトではindex.android.jsまたはindex.jsを検索します。以下のようにカスタマイズできます。

groovy
entryFile = file("../js/MyApplication.android.js")

extraPackagerArgs​

bundleコマンドに渡される追加のフラグのリストです。利用可能なフラグのリストはCLIのドキュメントにあります。デフォルトは空です。以下のようにカスタマイズできます。

groovy
extraPackagerArgs = []

hermesCommand​

hermescコマンド（Hermesコンパイラ）へのパスです。React NativeにはHermesコンパイラのバージョンがバンドルされているため、通常これをカスタマイズする必要はありません。プラグインは、お使いのシステムに適したコンパイラをデフォルトで使用します。

hermesFlags​

hermescに渡すフラグのリストです。デフォルトは["-O", "-output-source-map"]です。以下のようにカスタマイズできます。

groovy
hermesFlags = ["-O", "-output-source-map"]

enableBundleCompression​

バンドルアセットを.apkにパッケージ化する際に圧縮するかどうか。

.bundleの圧縮を無効にすると、RAMに直接メモリマップできるようになり、起動時間が向上します。その代償として、ディスク上のアプリサイズが大きくなります。.apkファイルはダウンロード前に圧縮されるため、.apkのダウンロードサイズはほとんど影響を受けないことに注意してください。

デフォルトではこれは無効になっており、アプリケーションのディスク容量を本当に懸念している場合を除き、有効にすべきではありません。

フレーバーとビルドバリアントの使用​

Androidアプリをビルドする際には、カスタムフレーバーを使用して、同じプロジェクトから異なるバージョンのアプリを作成したい場合があります。

カスタムビルドタイプ（stagingなど）やカスタムフレーバー（full、liteなど）を設定するには、公式のAndroidガイドを参照してください。デフォルトでは、新しいアプリは2つのビルドタイプ（debugとrelease）で作成され、カスタムフレーバーはありません。

すべてのビルドタイプとすべてのフレーバーの組み合わせにより、一連のビルドバリアントが生成されます。例えば、debug/staging/releaseビルドタイプとfull/liteフレーバーがある場合、fullDebug、fullStaging、fullReleaseなど、6つのビルドバリアントができます。

debugとrelease以外のカスタムバリアントを使用している場合は、debuggablevariants設定を使用して、どのバリアントがデバッグ可能であるかをReact Native Gradleプラグインに指示する必要があります。

diff
apply plugin: "com.facebook.react"

react {
+ debuggableVariants = ["fullStaging", "fullDebug"]
}

プラグインはすべてのdebuggableVariantsに対してJSバンドルをスキップするため、この設定が必要です。実行するにはMetroが必要です。例えば、fullStagingをdebuggableVariantsにリストすると、バンドルが欠落しているためストアに公開できなくなります。

プラグインの内部動作​

React Native Gradleプラグインは、React Nativeアプリケーションを本番環境に配布するためにアプリケーションビルドを設定する責任があります。このプラグインは、サードパーティのライブラリ内でも使用され、新アーキテクチャで使用されるCodegenを実行します。

以下はプラグインの責任の概要です。

  • デバッグ可能でないすべてのバリアントに対してcreateBundle<Variant>JsAndAssetsタスクを追加し、bundle、hermesc、およびcompose-source-mapコマンドを呼び出す責任を負います。
  • react-nativeのpackage.jsonからReact Nativeのバージョンを読み取り、com.facebook.react:react-androidおよびcom.facebook.react:hermes-android依存関係の適切なバージョンを設定します。
  • 必要なすべてのMaven依存関係を利用するために、適切なMavenリポジトリ（Maven Central、Google Maven Repo、JSCローカルMavenリポジトリなど）を設定します。
  • 新アーキテクチャを使用するアプリをビルドできるようにNDKを設定します。
  • 実行時にHermesや新アーキテクチャが有効になっているかどうかを知ることができるようにbuildConfigFieldsを設定します。
  • アプリが接続するポートを知るために、Metro DevServerポートをAndroidリソースとして設定します。
  • ライブラリやアプリが新アーキテクチャのためにCodegenを使用している場合、React Native Codegenを呼び出します。