Question

我已经构建了一个Android应用程序，我想使用React Native。它是一个大型应用程序，我不想一次迁移所有内容。例如，我的工具栏代码有点复杂，我想暂时保留原生代码。所以我的布局看起来像这样：

<RelativeLayout
    android:id="@+id/relative_layout"
    android:background="@color/background_color"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/action_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"/>

    <com.facebook.react.ReactRootView
        android:id="@+id/react_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

在onCreate（）而不是创建一个新的ReactRootView我正在这样做：

mReactRootView = (ReactRootView) findViewById(R.id.react_root);
... // Other init
setContentView(mReactRootView);

但是，我在setContentView（mReactRootView）上收到错误：

java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.

这让我相信我无法在其他视图中嵌套React Root 视图。我将如何保持当前的工具栏实现，但仍然在页面的其余部分使用React Native？我知道这个存在：https://facebook.github.io/react-native/docs/native-components-android.html我唯一的选择是桥接本机组件吗？

编辑：遵循康斯坦丁的建议，以下是我所拥有的：

ReactFragment.java

public class ReactFragment extends Fragment implements DefaultHardwareBackBtnHandler {
    ViewGroup group = (ViewGroup) inflater.inflate(R.layout.react_fragment, container, false);
    activity = getActivity();

    mReactRootView = new ReactRootView(activity);
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(activity.getApplication())
            .setBundleAssetName("index.bundle")
            .setJSMainModuleName("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(true)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();

    group.addView(mReactRootView);
    mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);
    mReactInstanceManager.onHostResume(activity, this);
    return group;
}
// onPause() onDestroy() etc.

react_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/react_root"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

添加到main_content.xml

...
<fragment
    android:name="com.amazon.kindlestore.main.ReactFragment"
    android:id="@+id/react_frag"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
...

在我的主要活动中，我正在添加像这样的片段：

ReactFragment reactFragment = (ReactFragment) getFragmentManager().findFragmentById(R.id.react_frag);
FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
fragmentTransaction.add(R.id.react_frag, reactFragment);
fragmentTransaction.commit();

这似乎有效，我的反应组件渲染在我的原生工具栏下面

Answer 1

您必须为RN ui part创建一个片段，并在xml布局中使用它。在此片段中创建ReactRootView，然后创建或获取ReactInstanceManager，您需要将其挂钩到片段的生命周期回调中。然后使用此实例管理器在ReactRootView内启动RN应用程序。

查看此官方guide（请勿忘记在顶部菜单中选择Android）

Answer 2

将LinearLayout替换为LinearLayout

可以嵌套ReactRootView（android）

2 个答案: