Saltar al contenido principal
Versión: 0.78

Integración con aplicaciones existentes

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 →

React Native es excelente cuando comienzas una nueva aplicación móvil desde cero. Sin embargo, también funciona muy bien para agregar una vista única o flujo de usuario a aplicaciones nativas existentes. Con unos pocos pasos, puedes añadir nuevas características, pantallas, vistas, etc. basadas en React Native.

Los pasos específicos varían según la plataforma para la que estés desarrollando.

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 →

Conceptos clave​

Los aspectos fundamentales para integrar componentes de React Native en tu aplicación Android son:

  1. Configurar la estructura de directorios correcta.

  2. Instalar las dependencias de NPM necesarias.

  3. Agregar React Native a tu configuración de Gradle.

  4. Escribir el código TypeScript para tu primera pantalla de React Native.

  5. Integrar React Native con tu código Android usando ReactActivity.

  6. Probar la integración ejecutando el bundler y viendo tu aplicación en funcionamiento.

Usando la plantilla comunitaria​

Mientras sigues esta guía, te sugerimos usar la Plantilla Comunitaria de React Native como referencia. La plantilla contiene una aplicación Android mínima y te ayudará a comprender cómo integrar React Native en una aplicación Android existente.

Prerrequisitos​

Sigue la guía para configurar tu entorno de desarrollo y usar React Native sin un framework para preparar tu entorno y desarrollar aplicaciones React Native para Android. Esta guía también asume que estás familiarizado con los conceptos básicos de desarrollo Android como crear Activities y editar el archivo AndroidManifest.xml.

1. Configurar la estructura de directorios​

Para garantizar una experiencia fluida, crea una nueva carpeta para tu proyecto integrado de React Native y luego mueve tu proyecto Android existente al subdirectorio /android.

2. Instalar dependencias de NPM​

Ve al directorio raíz y ejecuta el siguiente comando:

shell
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json

Esto copiará el archivo package.json de la plantilla comunitaria a tu proyecto.

Luego, instala los paquetes de NPM ejecutando:

shell
npm install

El proceso de instalación creará una nueva carpeta node_modules. Esta carpeta almacena todas las dependencias JavaScript necesarias para construir tu proyecto.

Agrega node_modules/ a tu archivo .gitignore (aquí el predeterminado de la comunidad).

3. Agregar React Native a tu aplicación​

Configurar Gradle​

React Native utiliza el React Native Gradle Plugin para configurar tus dependencias y la estructura del proyecto.

Primero, edita tu archivo settings.gradle agregando estas líneas (como sugiere la plantilla comunitaria):

groovy
// Configures the React Native Gradle Settings plugin used for autolinking
pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
// If using .gradle.kts files:
// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
includeBuild("../node_modules/@react-native/gradle-plugin")

// Include your existing Gradle modules here.
// include(":app")

Luego abre tu archivo build.gradle de nivel superior e incluye esta línea (como sugiere la plantilla comunitaria):

diff
buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
+       classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

Esto garantiza que el React Native Gradle Plugin (RNGP) esté disponible en tu proyecto. Finalmente, agrega estas líneas dentro del archivo build.gradle de tu aplicación (es un archivo build.gradle diferente que normalmente está en tu carpeta app - puedes usar el archivo de la plantilla comunitaria como referencia):

diff
apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"

repositories {
    mavenCentral()
}

dependencies {
    // Other dependencies here
+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
+   // If you don't use the RNGP, you'll have to specify version manually.
+   implementation("com.facebook.react:react-android")
+   implementation("com.facebook.react:hermes-android")
}

+react {
+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
+   autolinkLibrariesWithApp()
+}

Por último, abre tus archivos gradle.properties de la aplicación y agrega la siguiente línea (aquí el archivo de la plantilla comunitaria como referencia):

diff
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+newArchEnabled=true
+hermesEnabled=true

Configurar tu manifiesto​

Primero, asegúrate de tener el permiso de Internet en tu AndroidManifest.xml:

diff
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

+   <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication">
    </application>
</manifest>

Luego necesitas habilitar el tráfico de texto claro en tu AndroidManifest.xml de debug:

diff
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
+       android:usesCleartextTraffic="true"
+       tools:targetApi="28"
    />
</manifest>

Como es habitual, aquí tienes el archivo AndroidManifest.xml de la plantilla de la comunidad para usar como referencia: main y debug

Esto es necesario porque tu aplicación se comunicará con tu servidor de paquetes local, Metro, mediante HTTP.

Asegúrate de agregar esto solo en tu manifiesto de debug.

4. Escribiendo el código TypeScript​

Ahora modificaremos la aplicación nativa de Android para integrar React Native.

El primer código que escribiremos será el componente React Native para la nueva pantalla que se integrará en nuestra aplicación.

Crear un archivo index.js​

Primero, crea un archivo index.js vacío en la raíz de tu proyecto React Native.

index.js es el punto de entrada para aplicaciones React Native y siempre es requerido. Puede ser un archivo pequeño que importe otros archivos de tu componente o aplicación, o puede contener todo el código necesario.

Nuestro index.js debería verse así (aquí el archivo de la plantilla de la comunidad como referencia):

js
import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('HelloWorld', () => App);

Crear un archivo App.tsx​

Creemos un archivo App.tsx. Este es un archivo TypeScript que puede contener expresiones JSX. Contiene el componente raíz de React Native que integraremos en nuestra aplicación Android (enlace):

tsx
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode
              ? Colors.black
              : Colors.white,
            padding: 24,
          }}>
          <Text style={styles.title}>Step One</Text>
          <Text>
            Edit <Text style={styles.bold}>App.tsx</Text> to
            change this screen and see your edits.
          </Text>
          <Text style={styles.title}>See your changes</Text>
          <ReloadInstructions />
          <Text style={styles.title}>Debug</Text>
          <DebugInstructions />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: '600',
  },
  bold: {
    fontWeight: '700',
  },
});

export default App;

Aquí el archivo de la plantilla de la comunidad como referencia

5. Integración con tu código Android​

Ahora necesitamos agregar código nativo para iniciar el entorno de ejecución de React Native y renderizar nuestros componentes React.

Actualizar tu clase Application​

Primero, actualizaremos tu clase Application para inicializar React Native correctamente:

diff
package <your-package-here>;

import android.app.Application;
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactHost;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactHost;
+import com.facebook.react.defaults.DefaultReactNativeHost;
+import com.facebook.soloader.SoLoader;
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
+import java.util.List;

-class MainApplication extends Application {
+class MainApplication extends Application implements ReactApplication {
+ @Override
+ public ReactNativeHost getReactNativeHost() {
+   return new DefaultReactNativeHost(this) {
+     @Override
+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
+     @Override
+     protected String getJSMainModuleName() { return "index"; }
+     @Override
+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
+     @Override
+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
+     @Override
+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
+   };
+ }

+ @Override
+ public ReactHost getReactHost() {
+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
+ }

  @Override
  public void onCreate() {
    super.onCreate();
+   SoLoader.init(this, OpenSourceMergedSoMapping);
+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+     DefaultNewArchitectureEntryPoint.load();
+   }
  }
}

Como siempre, aquí el archivo MainApplication.kt de la plantilla de la comunidad como referencia

Crear una ReactActivity​

Finalmente, crearemos una nueva Activity que extenderá ReactActivity y alojará el código React Native. Esta actividad será responsable de iniciar el entorno de ejecución y renderizar el componente React.

java
// package <your-package-here>;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;

public class MyReactActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "HelloWorld";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
    }
}

Como es habitual, aquí tienes el archivo MainActivity.kt de la plantilla comunitaria para usar como referencia

Cuando crees una nueva Activity, debes agregarla a tu archivo AndroidManifest.xml. También debes establecer el tema de MyReactActivity como Theme.AppCompat.Light.NoActionBar (o cualquier tema sin ActionBar), de lo contrario tu aplicación mostrará una barra de acción sobre tu pantalla React Native:

diff
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication">

+     <activity
+       android:name=".MyReactActivity"
+       android:label="@string/app_name"
+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
+     </activity>
    </application>
</manifest>

Ahora tu actividad está lista para ejecutar código JavaScript.

6. Prueba tu integración​

Has completado todos los pasos básicos para integrar React Native con tu aplicación. Ahora iniciaremos el bundler Metro para compilar tu código de aplicación TypeScript en un bundle. El servidor HTTP de Metro comparte el bundle desde localhost en tu entorno de desarrollo hacia un simulador o dispositivo. Esto permite el hot reloading.

Primero, necesitas crear un archivo metro.config.js en la raíz de tu proyecto con el siguiente contenido:

js
const {getDefaultConfig} = require('@react-native/metro-config');
module.exports = getDefaultConfig(__dirname);

Puedes consultar el archivo metro.config.js de la plantilla comunitaria como referencia.

Una vez que tengas el archivo de configuración en su lugar, puedes ejecutar el bundler. Ejecuta el siguiente comando en el directorio raíz de tu proyecto:

shell
npm start

Ahora compila y ejecuta tu aplicación de Android como lo harías normalmente.

Cuando accedas a tu Activity impulsada por React dentro de la aplicación, debería cargar el código JavaScript desde el servidor de desarrollo y mostrar:

Creando una build de release en Android Studio​

¡También puedes usar Android Studio para crear tus builds de release! Es tan rápido como crear builds de release de tu aplicación nativa de Android existente.

El React Native Gradle Plugin se encargará de empaquetar el código JS dentro de tu APK/App Bundle.

Si no estás usando Android Studio, puedes crear una build de release con:

cd android
# For a Release APK
./gradlew :app:assembleRelease
# For a Release AAB
./gradlew :app:bundleRelease

./gradlew :app:assembleRelease

En este punto puedes continuar desarrollando tu aplicación normalmente. Consulta nuestra documentación sobre depuración y despliegue para aprender más sobre cómo trabajar con React Native.