¿Cuál es la forma correcta de agregar una sola vista React Native a una aplicación Android existente?

Estoy trabajando en un gran proyecto existente de Android e iOs, y mi equipo quisiera adoptar reaccionar nativo. Al principio, nos gustaría implementar una característica única en RN, ya que no tenemos la capacidad de migrar todo el proyecto a la vez.

He logrado agregar una vista de RN con éxito, tanto de un servidor de nodo local y de un archivo de paquetes JS ubicado en la carpeta de activos, pero se siente un poco hacky. Sé que esto es compatible con iOs pero no pude encontrar nada en los documentos con respecto a la integración con un proyecto Android existente. Aquí está la esencia de lo que surgió:

public class ReactNativeView extends FrameLayout { private static final String COMPONENT_NAME = "AwesomeProject"; // Path of our RN module relative to project root private static final String MODULE_NAME = "react-sources/index.android" public ReactNativeView(Context Context) { super(context); } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); ReactInstanceManager.Builder builder = ReactInstanceManager.builder() .setApplication(AppDelegate.sharedApplication()) .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.BEFORE_RESUME); if (BuildConfig.USE_RN_LOCAL_SERVER) { // Set module name to be loaded from local node server builder.setJSMainModuleName(MODULE_NAME); } else { Uri uri = AssetsManager.getInstance().getJsBundleUri(); // Load bundled jsBundle builder.setJSBundleFile(uri.getPath()); } ReactInstanceManager reactInstanceManager = builder.build(); MainActivity mainActivity = MainActivity.getMainActivity(); setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); ReactRootView reactRootView = new ReactRootView(AppDelegate.sharedApplication().getTopActivity()); // Is it really necessary to call 'startReactApplication' each time we want to render a react component? reactRootView.startReactApplication(reactInstanceManager, COMPONENT_NAME, null); addView(reactRootView); // After the view is added to the hierarchy we call the manager's 'onResume' function // to show the react view reactInstanceManager.onResume(mainActivity, mainActivity); // <-- What kind of sorcery is this?! } }

Y también he añadido una variable a la BuildConfig que determina qué paquete JS para usar:

 buildTypes { debug { buildConfigField "boolean", "USE_RN_LOCAL_SERVER", "true" // load from local server } release { minifyEnabled true proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' buildConfigField "boolean", "USE_RN_LOCAL_SERVER", "false" } }

Este es un hack completo. Llamar a startReactApplication cuando lo que realmente estoy haciendo es simplemente añadir una vista a la pantalla se siente incómodo. ¿Me falta una API o no se trata de un escenario compatible todavía?

¿Ha revisado el documento oficial de RN sobre este tema?

Te muestra cómo ejecutar correctamente una vista de RN dentro de una aplicación Android con código Java.

Así que aparentemente llamar a startReactApplication es de hecho para corregir el camino a seguir. Si alguien está interesado en una solución más completa y organizada, puede echar un vistazo a reaccionar-navegación nativa .