android如何將本地用戶界面組件公開到React Native Screen

我有一個已經構建的android應用程序，我想要使用React Native。它是一個大型應用程序，我不想一次遷移所有內容。android如何將本地用戶界面組件公開到React Native Screen

例如，我的底部條碼有點複雜，現在我想讓它保持原樣。例如：請參見下面

我想Android和反應本地組件之間的畫面分割爲

圖片

在Android原生底欄和更新網頁內容作出反應本地

注：我已經構建了React Native Bridge，並公開了android原生底部欄以反應環境，但它們並未顯示在屏幕上的任何位置，而只顯示反應內容。

來源

2017-04-03 Garima Mathur

@NimrodArgov是的，我已經遵循整合文檔。 –

我已經以這種方式解決了這種複雜性：

前：

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

結果：

它使得JSMain從內容作出反應僅限本機和不包括Android Native Bottom Bar。

後：

創建Android的佈局xml文件activity_react_footer，然後加入Android UI組件要與之反應組件包括。

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

膨脹佈局在您的活動，然後findViewById ReactRootView負載JS組件和TabLayout也。

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

結果：

這種做法將包括來自Android的屏幕內容都和應對本土。它會完全解決你的問題。

來源

2017-04-05 05:49:38

android如何將本地用戶界面組件公開到React Native Screen

回答

相關問題