Wie zeigt Android native UI-Komponenten, nativen Bildschirm zu reagieren

Question

Ich habe eine Android-Anwendung bereits gebaut, die ich in Native React verwenden möchte. Es ist eine große Anwendung, und ich möchte nicht alles auf einmal migrieren.

Zum Beispiel ist meine untere Strichcode ein bisschen komplex und ich möchte es jetzt nativ lassen. Für Beispiel: Siehe Bild unten

I Paravant wollen zwischen Android und reagieren nativen Komponenten wie

Bottom bar in Android india und aktualisiert Seiteninhalt in der india Reagieren

Hinweis : Ich habe React Native Bridge gebaut und Android native Bottom Bar ausgesetzt, um die Umgebung zu reagieren, aber sie werden nirgendwo auf dem Bildschirm angezeigt und es zeigt nur den Inhalt der Reaktion.

Answer 1

ich diese Art von Komplexität auf diese Weise gelöst haben:

Bevor:

mReactRootView = new ReactRootView(this); 
    mReactInstanceManager = ReactInstanceManager.builder() 
      .setApplication(getApplication()) 
      .setBundleAssetName("index.android.bundle") 
      .setJSMainModuleName("index.android") 
      .addPackage(new MainReactPackage()) 
      .addPackage(new OloRNBridgeReactPackage()) 
      .setUseDeveloperSupport(BuildConfig.DEBUG) 
      .setInitialLifecycleState(LifecycleState.RESUMED) 
      .setCurrentActivity(MenuActivity.this) 
      .build(); 

    mReactRootView.startReactApplication(mReactInstanceManager, "JSMain", null); 
    setContentView(mReactRootView); 

Ergebnis:

Es macht JSMain Inhalt von Native reagieren nur und enthält keine Android Native Bottom Bar.

Nach:

1. erstellen android Layout XML-Datei activity_react_footer und Android UI-Komponenten hinzufügen, die Sie mit React Komponente enthalten soll.

   <?xml version="1.0" encoding="utf-8"?> 
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:punchh="http://schemas.android.com/apk/res-auto" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical"> 
   <com.facebook.react.ReactRootView 
       android:id="@+id/react_root" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"/> 
   <android.support.design.widget.TabLayout 
       android:layout_weight="9" 
       android:id="@+id/tabLayout" 
       app:tabGravity="fill" 
       app:tabMode="fixed" 
       android:layout_width="match_parent" 
       android:layout_height="fill_parent" 
       android:background="?attr/colorPrimary" 
       android:minHeight="?attr/actionBarSize" 
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> 
   </LinearLayout> 
   

2. Inflate Layout in Ihrer Tätigkeit dann findViewById ReactRootView mit Last JS Component und TabLayout auch.

   setContentView(R.layout.activity_react_footer); 
   mReactInstanceManager = ReactInstanceManager.builder() 
        .setApplication(getApplication()) 
        .setBundleAssetName("index.android.bundle") 
        .setJSMainModuleName("index") 
        .addPackage(new MainReactPackage()) 
        .addPackage(new OloRNBridgeReactPackage()) 
        .setUseDeveloperSupport(BuildConfig.DEBUG) 
        .setInitialLifecycleState(LifecycleState.RESUMED) 
        .setCurrentActivity(MenuActivity.this) 
        .build(); 
   mReactRootView = (ReactRootView) findViewById(R.id.react_root); 
   mReactRootView.startReactApplication(mReactInstanceManager, "JSMain", null); 
   tabLayout = (TabLayout) findViewById(R.id.tabLayout); 
   

Ergebnis:

Dieser Ansatz sowohl Inhalte auf dem Bildschirm von Android enthalten wird und Native React. Es löst Ihr Problem vollständig.