React Native Gradle Plugin

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Ten przewodnik opisuje konfigurację React Native Gradle Plugin (często nazywanego RNGP) podczas budowania aplikacji React Native dla Androida.

Korzystanie z wtyczki

React Native Gradle Plugin jest dystrybuowany jako osobny pakiet NPM, który jest automatycznie instalowany wraz z react-native.

Wtyczka jest domyślnie skonfigurowana w nowych projektach tworzonych za pomocą npx react-native init. Jeśli stworzyłeś aplikację tą komendą, nie są potrzebne dodatkowe kroki instalacyjne.

Jeśli integrujesz React Native z istniejącym projektem, zajrzyj na odpowiednią stronę: zawiera ona szczegółowe instrukcje instalacji wtyczki.

Konfiguracja wtyczki

Domyślnie wtyczka działa od razu z rozsądnymi ustawieniami. Konfigurację należy dostosowywać tylko w przypadku konkretnych potrzeb.

Aby skonfigurować wtyczkę, zmodyfikuj blok react w pliku android/app/build.gradle:

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.
}

Każdy klucz konfiguracyjny jest opisany poniżej:

root

Główny folder projektu React Native, czyli lokalizacja pliku package.json. Domyślnie ... Można dostosować:

groovy

root = file("../")

reactNativeDir

Folder zawierający pakiet react-native. Domyślnie ../node_modules/react-native. W monorepo lub przy użyciu innego menedżera pakietów dostosuj reactNativeDir do swojej konfiguracji.

Przykład konfiguracji:

groovy

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

codegenDir

Folder zawierający pakiet react-native-codegen. Domyślnie ../node_modules/react-native-codegen. W monorepo lub przy użyciu innego menedżera pakietów dostosuj codegenDir do swojej konfiguracji.

Przykład konfiguracji:

groovy

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

cliFile

Plik wejściowy CLI React Native. Domyślnie ../node_modules/react-native/cli.js. Wtyczka używa tego pliku do wywołania CLI podczas bundle'owania i tworzenia aplikacji.

W monorepo lub przy użyciu innego menedżera pakietów dostosuj cliFile do swojej konfiguracji. Przykład:

groovy

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

debuggableVariants

Lista wariantów z włączonym debugowaniem (patrz używanie wariantów).

Domyślnie wtyczka uznaje tylko debug za wariant debuggableVariants, a release nie. Jeśli masz inne warianty (np. staging, lite, itd.), dostosuj tę listę.

Warianty oznaczone jako debuggableVariants nie będą zawierać bundle'a w aplikacji - wymagają działającego Metro.

Przykład konfiguracji:

groovy

debuggableVariants = ["liteDebug", "prodDebug"]

nodeExecutableAndArgs

Lista poleceń i argumentów Node.js używanych w skryptach. Domyślnie [node]. Można dodać flagi:

groovy

nodeExecutableAndArgs = ["node"]

bundleCommand

Nazwa komendy bundle używanej przy tworzeniu bundle'a. Przydatne przy RAM Bundles. Domyślnie bundle. Można dodać flagi:

groovy

bundleCommand = "ram-bundle"

bundleConfig

To ścieżka do pliku konfiguracyjnego, który zostanie przekazany do polecenia bundle --config <file> jeśli zostanie podany. Domyślnie pusta (plik konfiguracyjny nie będzie dostarczony). Więcej informacji o plikach konfiguracyjnych pakowania można znaleźć w dokumentacji CLI. Można dostosować w następujący sposób:

groovy

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

bundleAssetName

To nazwa pliku pakietu, który powinien zostać wygenerowany. Domyślnie index.android.bundle. Można dostosować w następujący sposób:

groovy

bundleAssetName = "MyApplication.android.bundle"

entryFile

Plik wejściowy używany do generowania pakietu. Domyślnie wyszukiwane są index.android.js lub index.js. Można dostosować w następujący sposób:

groovy

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

extraPackagerArgs

Lista dodatkowych flag, które zostaną przekazane do polecenia bundle. Lista dostępnych flag znajduje się w dokumentacji CLI. Domyślnie pusta. Można dostosować w następujący sposób:

groovy

extraPackagerArgs = []

hermesCommand

Ścieżka do polecenia hermesc (kompilatora Hermes). React Native zawiera wersję kompilatora Hermes w pakiecie, więc zazwyczaj nie ma potrzeby dostosowywania tego. Plugin domyślnie użyje właściwego kompilatora dla twojego systemu.

hermesFlags

Lista flag przekazywanych do hermesc. Domyślnie ["-O", "-output-source-map"]. Można dostosować w następujący sposób:

groovy

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

enableBundleCompression

Określa, czy zasób pakietu powinien być skompresowany podczas pakowania do .apk.

Wyłączenie kompresji dla .bundle pozwala na bezpośrednie mapowanie pamięci do RAM, co poprawia czas uruchamiania - kosztem większego rozmiaru aplikacji na dysku. Należy pamiętać, że rozmiar pobieranego .apk pozostanie w większości niezmieniony, ponieważ pliki .apk są kompresowane przed pobraniem.

Domyślnie ta opcja jest wyłączona i nie należy jej włączać, chyba że szczególnie zależy ci na oszczędzaniu miejsca na dysku dla twojej aplikacji.

Używanie wariantów produktu i wariantów budowania

Podczas budowania aplikacji na Androida możesz użyć niestandardowych wariantów produktu, aby tworzyć różne wersje aplikacji z tego samego projektu.

Zapoznaj się z oficjalnym przewodnikiem Androida dotyczącym konfigurowania niestandardowych typów budowania (np. staging) lub niestandardowych wariantów produktu (np. full, lite itd.). Domyślnie nowe aplikacje mają dwa typy budowania (debug i release) i brak niestandardowych wariantów.

Kombinacja wszystkich typów budowania i wszystkich wariantów produktu generuje zestaw wariantów budowania. Np. dla typów budowania debug/staging/release i wariantów full/lite otrzymasz 6 wariantów budowania: fullDebug, fullStaging, fullRelease itd.

Jeśli używasz niestandardowych wariantów poza debug i release, musisz poinstruować plugin React Native Gradle, wskazując które warianty są debugowalne przy użyciu konfiguracji debuggableVariants w następujący sposób:

diff

apply plugin: "com.facebook.react"

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

Jest to konieczne, ponieważ plugin pominie pakowanie JS dla wszystkich debuggableVariants - do ich uruchomienia będziesz potrzebować Metro. Np. jeśli dodasz fullStaging do debuggableVariants, nie będziesz mógł opublikować tej wersji w sklepie, ponieważ będzie brakować pakietu.

Co plugin robi w tle?

Plugin React Native Gradle odpowiada za konfigurowanie procesu budowania aplikacji w celu dostarczania aplikacji React Native do produkcji. Plugin jest również używany w bibliotekach innych firm do uruchamiania Codegen używanego w Nowej Architekturze.

Oto podsumowanie obowiązków plugina:

• Dodaje zadanie createBundle<Variant>JsAndAssets dla każdego wariantu niedebugowalnego, odpowiedzialne za wywołanie poleceń bundle, hermesc i compose-source-map.

• Konfiguruje właściwą wersję zależności com.facebook.react:react-android i com.facebook.react:hermes-android, odczytując wersję React Native z pliku package.json w react-native.

• Konfiguruje odpowiednie repozytoria Maven (Maven Central, Google Maven Repo, lokalne repozytorium JSC itp.) niezbędne do pobierania wymaganych zależności Maven.

• Konfiguruje NDK umożliwiając budowanie aplikacji wykorzystujących Nową Architekturę.

• Konfiguruje buildConfigFields umożliwiając sprawdzenie w czasie działania aplikacji, czy Hermes lub Nowa Architektura są włączone.

• Ustawia port Metro DevServer jako zasób Androida, dzięki czemu aplikacja wie, na którym porcie ma się połączyć.

• Wywołuje React Native Codegen jeśli biblioteka lub aplikacja używa Codegen w Nowej Architekturze.