Подключение React Native компонентов в релизной сборке Android

Не так давно я подключал компоненты React Native к нашему существующему приложению и потратил на это изрядное количество времени. 

Связано это было с дополнительными требованиями к сборкам релизов, требующих создания bundle файла.

Ожидал, что будет довольно простой, хорошо документированный рабочий процесс, но, к сожалению, был немного разочарован. Пришлось немного поработать с ошибками, чтобы наконец автоматизировать процесс связывания в наших релизных сборках.

В старых версиях документации React Native (0.19), в случаях, если перед сборкой приложения у вас нет react.gradle файла, рекомендуется запускать команду связывания (bundling) вручную.

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

Получается довольно утомительно, можно получить ошибку, и не совсем ясно где взять файл react.gradle (или то, что он должен содержать).

Как правильно запустить задачу связывания (bundling task) в обычном процессе сборки приложения?

К счастью,  в новой версии React Native использован лучший подход.

Если посмотреть в react-native directory, то вы легко найдете файл Gradle, который определяет задачу связывания. Это как раз тот react.gradle файл из документации.

Нам просто нужно подключить этот Gradle файл к существующему процессу сборки.

Перейдя по ссылке, вы узнаете, как правильно создать подписанный apk:

http://facebook.github.io/react-native/docs/signed-apk-android.html

И обратите внимание на это:

 «Если вам нужно изменить способ связывания комплекта JavaScript и/или ресурсов для рисования (например, если вы изменили имена файлов/папок по умолчанию или общую структуру проекта), перейдите на android/app/build.gradle, и вы узнаете как обновить проект, чтобы отразить эти изменения ».

Не правда ли похоже на подсказку?  Но, по факту, не говорит в деталях о том как на самом деле настроить проект.

Итак, посмотрите файл приложения build.gradle.

Обратите внимание на раздел конфигурации:

/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
*   // the name of the generated asset file containing your JS bundle
*   bundleAssetName: "index.android.bundle",
*
*   // the entry file for bundle generation
*   entryFile: "index.android.js",
*
*   // whether to bundle JS and assets in debug mode
*   bundleInDebug: false,
*/

Эти значения позволяют настроить поведение bundle task , включая такие параметры, как:

• связывать в отладочной (debug ) или в release сборках
• путь к директории вашего проекта React Native
• путь к js bundle
• и еще много полезного…

После того, как мы настроили значения конфигурации в нашем файле app/build.gradle, мы сможем подключиться к команде связывания во всех наших сборках выпуска.

Вот каким у нас стал файл конфигурации:

 // Настраивает команды bundleJS для React-Native
project.ext.react = [
   bundleInDebug: false,
   bundleInRelease: true,
   root: "path_to_rn_project_directory"
]
apply from: "/node_modules/react-native/react.gradle"

Благодаря этому мы можем правильно построить наш подписанный релизный apk с неповрежденным комплектом React Native js. 

Есть еще одно важное замечание, о котором следует знать (из документации React Native): Убедитесь, что gradle.properties не включает org.gradle.configureondemand = true, так как в этом случаев ходе сборке пропуститься объединение JS и ресурсов в APK

Если вас заинтересовал React Native и вы хотите с ним работать, ссылки ниже помогут вам начать его изучать:

• https://facebook.github.io/react-native/
• https://facebook.github.io/react-native/docs/getting-started.html