Question

我已经构建了一个Android应用程序，我想使用React Native。它是一个大型应用程序，我不想一次迁移所有内容。

例如，我的底部条形码有点复杂，我现在想把它留给原生。例如：见下面的图片

我希望在android之间进行屏幕分区并将本机组件作为

进行反应

Android Native中的底栏和React Native中的更新页面内容

注意：我已经构建了React Native Bridge并公开了android本机底栏以响应环境，但它们不会在屏幕上显示任何内容，只显示反应内容。

Answer 1

我已经用这种方式解决了这种复杂性：

之前：

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

<强>结果：

它仅从React Native呈现 JSMain 内容，不包含Android Native Bottom Bar。

<强>后：

创建android layout xml文件 activity_react_footer ，并添加要包含在React Component中的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>

在您的活动中扩充布局，然后使用加载JS Component和TabLayout查找ViewViewById ReactRootView。

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和React Native的屏幕上的内容。它将完全解决您的问题。

android如何将Native UI组件暴露给React Native Screen

1 个答案: