Plugin Gradle de React Native

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Esta guía describe cómo configurar el Plugin Gradle de React Native (comúnmente llamado RNGP) al compilar tu aplicación de React Native para Android.

Uso del plugin

El Plugin Gradle de React Native se distribuye como un paquete NPM independiente que se instala automáticamente con react-native.

El plugin ya viene configurado para nuevos proyectos creados con npx react-native init. No necesitas pasos adicionales para instalarlo si creaste tu aplicación con este comando.

Si estás integrando React Native en un proyecto existente, consulta la página correspondiente: contiene instrucciones específicas para instalar el plugin.

Configuración del plugin

Por defecto, el plugin funcionará inmediatamente con valores predeterminados razonables. Solo deberías consultar esta guía y personalizar el comportamiento si lo necesitas.

Para configurar el plugin, puedes modificar el bloque react dentro de tu 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.
}

Cada clave de configuración se describe a continuación:

root

Es la carpeta raíz de tu proyecto React Native, es decir, donde reside el archivo package.json. El valor predeterminado es ... Puedes personalizarlo así:

groovy

root = file("../")

reactNativeDir

Es la carpeta donde reside el paquete react-native. El valor predeterminado es ../node_modules/react-native. Si estás en un monorepositorio o usas un gestor de paquetes diferente, puedes ajustar reactNativeDir según tu configuración.

Puedes personalizarlo así:

groovy

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

codegenDir

Es la carpeta donde reside el paquete react-native-codegen. El valor predeterminado es ../node_modules/react-native-codegen. Si estás en un monorepositorio o usas un gestor de paquetes diferente, puedes ajustar codegenDir según tu configuración.

Puedes personalizarlo así:

groovy

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

cliFile

Es el archivo de entrada para la CLI de React Native. El valor predeterminado es ../node_modules/react-native/cli.js. Este archivo es necesario porque el plugin debe invocar la CLI para empaquetar y crear tu aplicación.

Si estás en un monorepositorio o usas un gestor de paquetes diferente, puedes ajustar cliFile según tu configuración. Puedes personalizarlo así:

groovy

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

debuggableVariants

Es la lista de variantes depurables (consulta uso de variantes para más contexto sobre variantes).

Por defecto, el plugin considera como debuggableVariants solo debug, mientras que release no lo es. Si tienes otras variantes (como staging, lite, etc.), deberás ajustar esto en consecuencia.

Las variantes listadas como debuggableVariants no incluirán un bundle pregenerado, por lo que necesitarás Metro para ejecutarlas.

Puedes personalizarlo así:

groovy

debuggableVariants = ["liteDebug", "prodDebug"]

nodeExecutableAndArgs

Es la lista de comandos y argumentos de Node que deben invocarse para todos los scripts. Por defecto es [node], pero puede personalizarse para añadir banderas adicionales así:

groovy

nodeExecutableAndArgs = ["node"]

bundleCommand

Es el nombre del comando bundle que se invocará al crear el bundle para tu aplicación. Es útil si usas RAM Bundles. Por defecto es bundle, pero puede personalizarse para añadir banderas adicionales así:

groovy

bundleCommand = "ram-bundle"

bundleConfig

Esta es la ruta a un archivo de configuración que se pasará a bundle --config <file> si se proporciona. Por defecto está vacío (no se proporcionará archivo de configuración). Más información sobre archivos de configuración para bundling puede encontrarse en la documentación de CLI. Se puede personalizar así:

groovy

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

bundleAssetName

Este es el nombre del archivo bundle que se generará. Por defecto es index.android.bundle. Se puede personalizar así:

groovy

bundleAssetName = "MyApplication.android.bundle"

entryFile

El archivo de entrada utilizado para generar el bundle. Por defecto busca index.android.js o index.js. Se puede personalizar así:

groovy

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

extraPackagerArgs

Lista de flags adicionales que se pasarán al comando bundle. La lista de flags disponibles está en la documentación de CLI. Por defecto está vacía. Se puede personalizar así:

groovy

extraPackagerArgs = []

hermesCommand

Ruta al comando hermesc (compilador de Hermes). React Native incluye una versión del compilador de Hermes, por lo que generalmente no necesitarás personalizar esto. El plugin usará el compilador correcto para tu sistema por defecto.

hermesFlags

Lista de flags para pasar a hermesc. Por defecto es ["-O", "-output-source-map"]. Puedes personalizarla así:

groovy

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

enableBundleCompression

Indica si el Asset Bundle debe comprimirse al empaquetarse en un .apk.

Deshabilitar la compresión para el .bundle permite mapearlo directamente en memoria RAM, mejorando el tiempo de inicio, a costa de un mayor tamaño de la aplicación en disco. Ten en cuenta que el tamaño de descarga del .apk no se verá afectado ya que los archivos .apk se comprimen antes de descargarse.

Por defecto está deshabilitado y no deberías activarlo a menos que estés realmente preocupado por el espacio en disco de tu aplicación.

Uso de Flavors y Variantes de Build

Al construir aplicaciones Android, puedes usar flavors personalizados para tener diferentes versiones de tu aplicación desde el mismo proyecto.

Consulta la guía oficial de Android para configurar tipos de build personalizados (como staging) o flavors personalizados (como full, lite, etc.). Por defecto, las nuevas aplicaciones se crean con dos tipos de build (debug y release) y sin flavors personalizados.

La combinación de todos los tipos de build y todos los flavors genera un conjunto de variantes de build. Por ejemplo, con tipos de build debug/staging/release y flavors full/lite tendrás 6 variantes: fullDebug, fullStaging, fullRelease, etc.

Si usas variantes personalizadas más allá de debug y release, debes indicar al React Native Gradle Plugin qué variantes son debuggeables usando la configuración debuggableVariants así:

diff

apply plugin: "com.facebook.react"

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

Esto es necesario porque el plugin omitirá el bundling de JS para todas las debuggableVariants: necesitarás Metro para ejecutarlas. Por ejemplo, si listas fullStaging en debuggableVariants, no podrás publicarla en una tienda porque le faltará el bundle.

¿Qué hace el plugin internamente?

El React Native Gradle Plugin es responsable de configurar el build de tu aplicación para enviar aplicaciones React Native a producción. El plugin también se usa en bibliotecas de terceros para ejecutar el Codegen utilizado en la Nueva Arquitectura.

Este es un resumen de las responsabilidades del plugin:

• Agrega una tarea createBundle<Variant>JsAndAssets para cada variante no depurable, responsable de invocar los comandos bundle, hermesc y compose-source-map.

• Configura la versión correcta de las dependencias com.facebook.react:react-android y com.facebook.react:hermes-android, leyendo la versión de React Native desde el package.json de react-native.

• Configura los repositorios Maven adecuados (Maven Central, Google Maven Repo, repositorio local JSC Maven, etc.) necesarios para consumir todas las dependencias Maven requeridas.

• Configura el NDK para permitirte construir aplicaciones que utilizan la Nueva Arquitectura.

• Configura los buildConfigFields para que puedas determinar en tiempo de ejecución si Hermes o la Nueva Arquitectura están habilitados.

• Configura el Puerto de Metro DevServer como recurso de Android para que la aplicación sepa en qué puerto debe conectarse.

• Invoca el React Native Codegen si una biblioteca o aplicación está utilizando el Codegen para la Nueva Arquitectura.