android reactnative 嵌入原生页面中

最新推荐文章于 2022-10-26 20:32:15 发布

秃驴放手

最新推荐文章于 2022-10-26 20:32:15 发布

阅读量431

点赞数

分类专栏： android开发

本文链接：https://blog.csdn.net/storm1314888/article/details/80419305

版权

android开发专栏收录该内容

39 篇文章 0 订阅

订阅专栏

在xml中加入ReactView组件

<com.facebook.react.ReactRootView
        android:id="@+id/test_js"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tv_tv"/>

在activity中添加代码

private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

    public void initData() {
        mReactRootView = (ReactRootView) mLayoutView.findViewById(R.id.test_js);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(((Activity)getContext()).getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSBundleFile(bundlePath)
                .setJSMainModulePath("index.android")//对应index.android.js
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG) //开发者支持，BuildConfig.DEBUG的值默认是false，无法使用开发者菜单
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
//        这里的ReactNativeView对应index.android.js中AppRegistry.registerComponent('ReactNativeView', () => ReactNativeView)的ReactNativeView
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
    }

由上面的代码可知，ReactRootView 是从view中find到的，而不是new出来的，起ReactInstanceManager也是自己build出来的。
其本质上mReactRootView 就是一个view组件，与ReactActivity中将setContentView(mReactRootView);一个原理