android - 可以嵌套 ReactRootView (android)

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.

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

编辑:按照下面康斯坦丁的建议，这是我的建议:

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"/>
...

在我的主要 Activity 中，我添加了这样的 fragment :

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

这似乎有效，我的 react 组件在我的原生工具栏下方呈现

Answer 1

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

看看这个官方guide (不要忘记在顶部菜单中选择 Android)