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

React Native Gradle プラグイン

このガイドでは、Android 用の React Native アプリケーションをビルドする際に、React Native Gradle プラグイン (RNGP と呼ばれることが多い) を構成する方法について説明します。

プラグインの使用​

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

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

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

プラグインの構成​

デフォルトでは、プラグインは適切なデフォルト設定ですぐに使用できます。このガイドを参照し、必要な場合にのみ動作をカスタマイズする必要があります。

プラグインを構成するには、android/app/build.gradle 内の react ブロックを修正できます。

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 ファイルが存在する場所です。デフォルトは .. です。次のようにカスタマイズできます

root = file("../")

reactNativeDir​

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

次のようにカスタマイズできます

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

codegenDir​

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

次のようにカスタマイズできます

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

cliFile​

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

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

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

debuggableVariants​

これは、デバッグ可能なバリアントのリストです (バリアントの詳細については、バリアントの使用 を参照してください)。

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

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

次のようにカスタマイズできます

debuggableVariants = ["liteDebug", "prodDebug"]

nodeExecutableAndArgs​

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

nodeExecutableAndArgs = ["node"]

bundleCommand​

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

bundleCommand = "ram-bundle"

bundleConfig​

これは、指定された場合に bundle --config <file> に渡される構成ファイルへのパスです。デフォルトは空です (構成ファイルは提供されません)。バンドル構成ファイルの詳細については、CLI ドキュメントを参照してください。次のようにカスタマイズできます

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

bundleAssetName​

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

bundleAssetName = "MyApplication.android.bundle"

entryFile​

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

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

extraPackagerArgs​

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

extraPackagerArgs = []

hermesCommand​

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

hermesFlags​

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

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

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

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

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

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

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

apply plugin: "com.facebook.react"

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

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

プラグインは内部で何をしているのか？​

React Native Gradle プラグインは、React Native アプリケーションを本番環境に提供するためのアプリケーションビルドを構成する役割を担っています。プラグインは、サードパーティライブラリ内でも使用され、新しいアーキテクチャで使用されるCodegenを実行します。

以下は、プラグインの役割の概要です

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