логотип PurpleSchool
логотип PurpleSchool

Настройка и использование плагина Gradle на React Native

Автор

Олег Марков

Введение

React Native дает отличную возможность создавать кроссплатформенные мобильные приложения, используя JavaScript и React. Однако для полноценной работы с Android-платформой проект React Native использует Gradle — мощную систему автоматизации сборки. Gradle управляет зависимостями, настройками сборки и скриптами, которые позволяют собирать приложения под Android, выполнять различные таски (например, сборку, тестирование или деплой), подключать сторонние библиотеки и плагин-расширения.

Прежде чем приступить к кастомизации или оптимизации процесса сборки, важно разобраться, как устроен gradle-плагин в контексте React Native и какие возможности он предоставляет разработчику. В этой статье вы найдете подробную инструкцию по базовой и продвинутой настройке gradle-проекта на React Native, узнаете, как подключать плагины, решать типичные проблемы и оптимизировать процесс сборки приложений для Android.

Структура проекта React Native для Android

Прежде чем переходить к настройкам, давайте посмотрим, как выглядит Android-часть стандартного проекта React Native.

Основные директории и файлы

Когда вы создаете проект с помощью команды:

npx react-native init YourAppName

В папке android/ вы найдете:

  • android/app/ — основное Android-приложение (Java или Kotlin код, ресурсы)
  • android/build.gradle — настройка gradle на уровне всего Android-проекта
  • android/app/build.gradle — специфические параметры для вашего приложения
  • android/gradle/ — вспомогательные скрипты и файлы
  • android/gradle.properties — конфиг значения для переменных gradle
  • android/settings.gradle — связывает модули проекта

Давайте разберем, за что отвечает каждый файл, связанный с gradle.

Gradle играет важную роль в сборке Android приложений на React Native. Правильная настройка плагина Gradle позволяет оптимизировать процесс сборки, управлять зависимостями и решать возникающие конфликты. Однако, для эффективной работы с Gradle необходимо понимать его структуру, синтаксис и особенности интеграции с React Native. Если вы хотите детально разобраться в настройке и использовании плагина Gradle и научиться оптимизировать процесс сборки ваших Android приложений — приходите на наш большой курс React Native и Expo Router. На курсе 184 уроков и 11 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

build.gradle (Project-level)

Этот файл (android/build.gradle) определяет глобальные плагины, репозитории и версии gradle-tools, используемые всеми модулями проекта.

Пример содержимого:

// Глобальный файл gradle, общие настройки
buildscript {
    ext {
        buildToolsVersion = "33.0.0"  // Версия инструментов сборки Android
        minSdkVersion = 21           // Мин. поддерживаемая версия Android
        compileSdkVersion = 33       // Версия компилятора SDK
        targetSdkVersion = 33        // Целевая версия Android SDK
    }
    repositories {
        google()      // Репозиторий Google
        mavenCentral() // Центральный Maven
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.2.2")  // Основной плагин Gradle для Android
    }
}

// Применение репозиториев для всех подмодулей
allprojects {
    repositories {
        mavenCentral()
        google()
    }
}

build.gradle (Module-level)

Этот файл (android/app/build.gradle) содержит настройки, специфичные для вашего приложения: плагины, зависимости, параметры сборки.

Пример:

apply plugin: "com.android.application"

android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.yourapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false  // Отключаем shrinker для дебага
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

dependencies {
    implementation project(':react-native')
    implementation "com.facebook.react:react-native:+"
    // Здесь можно добавлять другие библиотеки
}

gradle.properties

Здесь можно хранить переменные окружения, которые будут использоваться внутри ваших gradle-скриптов, например:

MY_VAR=123
ORG_GRADLE_PROJECT_customKey=myValue

Их удобно применять для разделения параметров по средам или передачи секретов.

Настройка плагинов Gradle в React Native

Плагины расширяют возможности Gradle, предоставляя дополнительные таски, скрипты, хуки и интеграцию (например, подключение библиотек Google, Firebase, Sentry и других).

Поиск и подключение плагинов Gradle

Чтобы использовать сторонние возможности — например, интеграцию с Firebase или специфичными SDK — вам нужно добавить соответствующий gradle-плагин.

Пример подключения gradle-плагина

Для примера рассмотрим подключение плагина Google Services.

1. Добавьте зависимость на уровень проекта android/build.gradle:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.10'  // Google Services Plugin
    }
}

2. Активируйте плагин в android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'  // В самом низу файла

3. Добавьте необходимые зависимости библиотеки:

dependencies {
    implementation 'com.google.firebase:firebase-analytics:21.2.2'
}

4. Снова выполните сборку:

cd android && ./gradlew clean && ./gradlew assembleDebug

Если возникнут ошибки, внимательно смотрите на сообщения в консоли: зачастую не хватает какой-то из зависимостей или несовместима версия build tools.

Работа со стандартными плагинами и настройками

Gradle поддерживает множество встроенных плагинов:

  • com.android.application — основной для сборки Android приложений
  • com.android.library — для создания Android библиотек
  • kotlin-android — для поддержки Kotlin
  • Прочие плагин-расширения

Например, добавление поддержки Kotlin:

В android/build.gradle:

buildscript {
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.21"
    }
}

В android/app/build.gradle:

apply plugin: 'kotlin-android'

Теперь при запуске сборки Gradle будет обрабатывать Kotlin-код наряду с Java.

Использование Gradle для типовых задач в React Native

Давайте разберем, какие задачи чаще всего решаются с помощью gradle в React Native Android-проектах.

Сборка APK и управление вариантами сборки

Gradle позволяет создавать разные сборки приложения — debug, release, custom flavor’ы.

Варианты сборки задаются в block’e buildTypes:

android {
    ...
    buildTypes {
        debug {
            applicationIdSuffix ".debug" // Добавляем суффикс для debug билдов
            debuggable true
        }
        release {
            minifyEnabled true           // Включение ProGuard
            signingConfig signingConfigs.release // Подпись релиз-билда
        }
    }
}

Сборка debug-версии APK:

cd android
./gradlew assembleDebug

Сборка release-версии APK:

./gradlew assembleRelease

assembleRelease готовит APK к публикации — такой файл можно загружать в Google Play или тестировать на устройствах.

Управление зависимостями

Gradle управляет зависимостями с помощью блока dependencies. Здесь вы добавляете версии библиотек, используемых в вашем Android-модуле.

dependencies {
    implementation "com.facebook.react:react-native:+" // Сама библиотека React Native
    implementation "androidx.core:core-ktx:1.9.0"
    // Любые плагины, требуемые нативными модулями
}

Если какой-то React Native пакет требует добавить строку в dependencies, делайте это в этом блоке.

Переменные и среды окружения

Часто приложения требуют держать разные значения (например, API ключи) для debug и release-билдов. Gradle позволяет это делать:

android {
    ...

    buildTypes {
        debug {
            buildConfigField "String", "API_URL", "\"https://test.api/\""
        }
        release {
            buildConfigField "String", "API_URL", "\"https://prod.api/\""
        }
    }
}

Теперь эти значения попадут в BuildConfig — получить их можно из Java/Kotlin кода.

Глобальные оптимизации и кастомизация скриптов gradle

Gradle-плагины можно расширять и дорабатывать под свои задачи. Вот несколько техник, которые полезны разработчикам на практике.

Использование кастомных gradle-tasks

Если у вас есть необходимость автоматизировать какое-то действие (например, запуск тестов, сборка документации, очистка build кэша), это можно сделать через задачи gradle.

Пример: простая кастомная задача:

task printHello {
    doLast {
        println 'Привет, мир Gradle!'
    }
}

// Запуск: ./gradlew printHello

Расширение возможностей с помощью gradle-скриптов

Скрипты можно размещать даже в отдельных файлах и импортировать их в основной build.gradle. К примеру — управление версиями зависимостей через корневые переменные:

// android/build.gradle
ext {
    reactNativeVersion = '0.71.0'
}

// android/app/build.gradle
dependencies {
    implementation "com.facebook.react:react-native:$rootProject.ext.reactNativeVersion"
}

Работа с gradle.properties

Рекомендуется выносить чувствительные параметры в gradle.properties, чтобы не коммитить секреты в репозиторий.

MY_SECRET_TOKEN=abc123

В build.gradle получить переменную можно так:

def token = project.findProperty("MY_SECRET_TOKEN") ?: ""

Автоматизация сборки с помощью CI/CD

Gradle прекрасно сочетается с инструментами автоматизации: GitHub Actions, GitLab CI, Bitrise, App Center. Обычно CI аналитики используют команды gradle:

cd android && ./gradlew assembleRelease

В скриптах можно подставлять переменные окружения для настройки вариантов сборки, ключей подписи и прочих параметров.

Практические советы по работе с gradle в React Native

Как ускорить сборку

  • Используйте gradle daemon: org.gradle.daemon=true в gradle.properties
  • Не повышайте compileSdkVersion и buildToolsVersion без крайней необходимости
  • Чистите кэш: ./gradlew clean
  • Используйте incremental builds: org.gradle.caching=true

Диагностика ошибок gradle

  • Всегда смотрите полный stacktrace: ./gradlew assembleDebug --stacktrace
  • Используйте команды --info или --debug для подробного лога
  • Проверяйте совместимость плагинов между собой и с версией build tools

Советы по версии плагинов

Следите за тем, чтобы версии gradle-плагинов были совместимы с вашей версией React Native. Иногда после обновления RN нужно пересматривать версии используемых плагинов — это частый источник ошибок сборки.

Заключение

Плагин Gradle является критически важным компонентом процесса сборки Android-приложения в React Native. Грамотная настройка gradle-файлов позволяет ускорить сборку, добавлять внешние библиотеки и плагины, разделять параметры сборки между различными окружениями, а также автоматизировать процесс создания финального APK. Основные моменты, которые стоит держать в фокусе: правильно задавать зависимости, не смешивать версии плагинов, периодически обновлять build tools и использовать environment variables для секретных данных. Вы сможете глубже понять и уверенно настраивать Android-проекты React Native, если научитесь использовать возможности gradle на полную мощность.

Gradle - это важный, но не единственный инструмент в разработке Android приложений на React Native. Для создания полноценного приложения необходимо освоить множество других технологий и подходов, включая работу с UI, данными и нативными функциями. Курс React Native и Expo Router поможет вам в этом. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир React Native прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как обновить wrapper-скрипты Gradle в папке android?

Откройте терминал в папке android/ и выполните команду:

./gradlew wrapper --gradle-version 7.4

Это обновит файлы gradlew и конфиги wrapper до указанной версии. Не забудьте зафиксировать изменения в системе контроля версий.

Как добавить переменные среды для разных сборок (debug/release) без хардкода?

Лучше всего создать файл .env для JS-кода с помощью пакета react-native-config, а для gradle на стороне Android — использовать gradle.properties и block buildTypes с buildConfigField. Например:

buildTypes {
    debug {
        buildConfigField "String", "API_ENDPOINT", "\"https://test.api\""
    }
    release {
        buildConfigField "String", "API_ENDPOINT", "\"https://prod.api\""
    }
}

Что делать, если при сборке возникает ошибка с совместимостью версий gradle plugins и build tools?

Сверьте все версии коммитов в android/build.gradle и android/gradle/wrapper/gradle-wrapper.properties. Сравните с документацией React Native вашей версии. Часто обновление classpath 'com.android.tools.build:gradle' и gradle wrapper помогает решить проблему.

Как явно подключить стороннюю библиотеку, требующую кастомный gradle-плагин?

Добавьте нужный classpath в раздел buildscript.dependencies файла android/build.gradle, затем в нужном module build.gradle (android/app/build.gradle) — используйте apply plugin. Не забудьте добавить необходимые зависимости в блок dependencies.

Как ускорить gradle сборку для частого дебага?

Добавьте в gradle.properties такие строки:

org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

Чаще используйте ./gradlew assembleDebug вместо assembleRelease для тестов, и не забывайте очищать кэш время от времени (./gradlew clean).

Стрелочка влевоЧто такое React Native Введение для начинающих

Постройте личный план изучения React-native до уровня Middle — бесплатно!

React-native — часть карты развития Mobile

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по React-native

Работа со ScrollView в React NativeРабота с видео в React NativeКак реализовать аудиоплеер на React NativeНастройка и использование input и textinput в React NativeИнтеграция видео плеера в приложение на React NativeИспользование выпадающих списков в React NativeСоздание и настройка native module на React NativeКак создать модальные окна в React NativeРабота с изображениями в React NativeОтображение списков данных в React NativeГайд по файловой системе в React NativeИнтеграция камеры в приложение на React NativeСоздание интерактивных кнопок в React Native
Как использовать векторные иконки в React Native5 популярных библиотек UI компонентов React NativeСоздание и использование tabs в React NativeРуководство по стилизации компонентов в React NativeОптимизация переходов между экранами в React NativeАдаптация safe area context на React NativeОбзор библиотек для навигации в React NativeСоздание сложных анимаций (reanimated) на React NativeИспользование библиотеки стилей Paper в React NativeРуководство по navigation в React NativeОптимизация отображения списков в React NativeКак реализовать linking на React NativeГайд по UI-китам для React NativeГде искать elements для приложения на React NativeРабота с цветами в React Native
Открыть базу знаний

Лучшие курсы по теме

изображение курса

React Native и Expo Router

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

Основы JavaScript

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.8
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

TypeScript с нуля

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее

Отправить комментарий