Saltar al contenido principal
Versión: Siguiente

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/Siguiente-stable/template/package.json

This will copy the package.json file from the Community template to your project.

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.

Add node_modules/ to your .gitignore file (here the Community default one).

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.

First, let's edit your settings.gradle file by adding those lines (as suggested from the Community template):

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")

Then you need to open your top level build.gradle and include this line (as suggested from the Community template):

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

This makes sure the React Native Gradle Plugin (RNGP) is available inside your project. Finally, add those lines inside your Applications's build.gradle file (it's a different build.gradle file usually inside your app folder - you can use the Community template file as reference):

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()
+}

Finally, open your application gradle.properties files and add the following line (here the Community template file as reference):

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>

As usual, here the AndroidManifest.xml file from the Community template to use as a reference: main and 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.

Our index.js should look as follows (here the Community template file as reference):

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

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

Crear un archivo App.tsx​

Let's create an App.tsx file. This is a TypeScript file that can have JSX expressions. It contains the root React Native component that we will integrate into our Android application (link):

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;

Here is the Community template file as reference.

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();
+   }
  }
}

As usual, here the MainApplication.kt Community template file as reference.

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());
    }
}

As usual, here the MainActivity.kt Community template file as reference.

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);

You can checkout the metro.config.js file from the Community template file as reference.

Una vez que tengas el archivo de configuración listo, 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.