Qual è il modo corretto di aggiungere una singola vista React Native a un'applicazione Android esistente?

Question

Sto lavorando a un grande progetto Android e iOs esistente e il mio team vorrebbe adottare un approccio nativo. Inizialmente, vorremmo implementare una singola funzionalità in RN poiché non abbiamo la capacità di migrare l'intero progetto in una sola volta.

Sono riuscito ad aggiungere una visualizzazione RN con esito positivo, sia da un server nodo locale che da un file bundle JS che si trova nella cartella delle risorse, ma sembra un po 'hacky. So che questo è supportato su iOS ma non sono riuscito a trovare nulla nei documenti relativi all'integrazione con un progetto Android esistente. Ecco l'essenza di ciò che mi si avvicinò con:

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?! 
    } 
} 

e ho anche aggiunto una variabile al BuildConfig che determina quale JS fascio da utilizzare:

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

Si tratta di un hack completo. Chiamando startReactApplication quando quello che sto facendo è semplicemente aggiungendo una vista sullo schermo si sente imbarazzante. Mi manca un'API o non è ancora uno scenario supportato?

Answer 1

Hai controllato il RN official doc in merito a questo argomento?

Mostra come eseguire in modo pulito una vista RN all'interno di un'app Android con codice Java.

Answer 2

Quindi apparentemente chiamare startReactApplication è in realtà per correggere la strada da percorrere. Se qualcuno è interessato a una soluzione più completa e organizzata, puoi dare un'occhiata a react-native-navigation.