Integración con un Fragmento de Android

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 →

La guía de Integración con Apps Existentes detalla cómo integrar una aplicación React Native a pantalla completa en una app Android existente como una Activity.

Usar componentes de React Native dentro de Fragmentos en una app existente requiere configuración adicional.

1. Agrega React Native a tu aplicación

Sigue la guía de Integración con Apps Existentes hasta el final para asegurarte de poder ejecutar tu app React Native en una Activity a pantalla completa.

2. Agrega un FrameLayout para el Fragmento de React Native

En este ejemplo, usaremos un FrameLayout para añadir un Fragmento de React Native a una Activity. Este enfoque es lo suficientemente flexible y puede adaptarse para usar React Native en otros diseños como Bottom Sheets o Tab Layouts.

Primero agrega un <FrameLayout> con un id, ancho y alto al diseño de tu Activity (ej. main_activity.xml en la carpeta res/layouts). Este será el contenedor donde renderizarás tu Fragmento de React Native.

xml

<FrameLayout
    android:id="@+id/react_native_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3. Haz que tu Activity anfitrión implemente DefaultHardwareBackBtnHandler

Como tu activity anfitrión no es una ReactActivity, debes implementar la interfaz DefaultHardwareBackBtnHandler para manejar eventos del botón atrás. Esto es requerido por React Native para gestionar dichos eventos.

Ve a tu activity anfitrión y asegúrate de que implemente la interfaz DefaultHardwareBackBtnHandler:

Java

diff

package <your-package-here>

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler

+class MainActivity : AppCompatActivity() {
+class MainActivity : AppCompatActivity(), DefaultHardwareBackBtnHandler {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)

        findViewById<Button>(R.id.sample_button).setOnClickListener {
            // Handle button click
        }
    }

+   override fun invokeDefaultOnBackPressed() {
+       super.onBackPressed()
+   }
}

Kotlin

diff

package <your-package-here>;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

-class MainActivity extends AppCompatActivity {
+class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        findViewById(R.id.button_appcompose).setOnClickListener(button -> {
            // Handle button click
        });
    }

+   @Override
+   public void invokeDefaultOnBackPressed() {
+       super.onBackPressed();
+   }
}

4. Añade un Fragmento de React Native al FrameLayout

Finalmente, podemos actualizar la Activity para añadir un Fragmento de React Native al FrameLayout. En este ejemplo específico, asumiremos que tu Activity tiene un botón con id sample_button que al presionarse renderizará el Fragmento.

Actualiza el método onCreate de tu Activity de la siguiente manera:

Java

diff

package <your-package-here>

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
+import com.facebook.react.ReactFragment
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler

public class MainActivity : AppCompatActivity(), DefaultHardwareBackBtnHandler {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)

        findViewById<Button>(R.id.sample_button).setOnClickListener {
+           val reactNativeFragment = ReactFragment.Builder()
+               .setComponentName("HelloWorld")
+               .setLaunchOptions(Bundle().apply { putString("message", "my value") })
+               .build()
+           supportFragmentManager
+               .beginTransaction()
+               .add(R.id.react_native_fragment, reactNativeFragment)
+               .commit()
        }
    }

   override fun invokeDefaultOnBackPressed() {
       super.onBackPressed()
   }
}

Kotlin

diff

package <your-package-here>;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
+import com.facebook.react.ReactFragment;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        findViewById(R.id.button_appcompose).setOnClickListener(button -> {
+           Bundle launchOptions = new Bundle();
+           launchOptions.putString("message", "my value");
+
+           ReactFragment fragment = new ReactFragment.Builder()
+                   .setComponentName("HelloWorld")
+                   .setLaunchOptions(launchOptions)
+                   .build();
+           getSupportFragmentManager()
+                   .beginTransaction()
+                   .add(R.id.react_native_fragment, fragment)
+                   .commit();
        });
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

Analicemos el código anterior.

El ReactFragment.Builder() se usa para crear un nuevo ReactFragment, y luego empleamos el supportFragmentManager para añadir ese Fragmento al FrameLayout.

Dentro del builder puedes personalizar cómo se crea el fragmento:

• setComponentName es el nombre del componente que deseas renderizar. Corresponde al string especificado en tu index.js dentro del método registerComponent.

• setLaunchOptions es un método opcional para pasar props iniciales a tu componente. Puedes eliminarlo si no lo usas.

5. Prueba tu integración

Ejecuta yarn start para iniciar el bundler, luego ejecuta tu app Android en Android Studio. La app debería cargar el código JavaScript/TypeScript desde el servidor de desarrollo y mostrarlo en tu Fragmento de React Native dentro de la Activity.

Tu aplicación debería verse así: