Android Fragment Activity View中集成React Native页面

最新推荐文章于 2023-05-30 11:55:02 发布

原创最新推荐文章于 2023-05-30 11:55:02 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

Android 同时被 3 个专栏收录

60 篇文章

订阅专栏

app

35 篇文章

订阅专栏

React Native

27 篇文章

订阅专栏

本文介绍了如何在Activity、Fragment及View中集成ReactNative，并详细展示了配置ReactInstanceManager的过程。但在5.0+系统中集成到Fragment时遇到错误，4.0+系统则正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Activity

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "XXXReactNativeProject", null);
        setContentView(mReactRootView);
    }

2.Fragment

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
            mReactRootView = new ReactRootView(mContext);
            mReactInstanceManager = ReactInstanceManager.builder()
                    .setApplication(getActivity().getApplication())
                    .setBundleAssetName("index.android.bundle")
                    .setJSMainModuleName("index.android")
                    .addPackage(new MainReactPackage())
                    .setUseDeveloperSupport(BuildConfig.DEBUG)
                    .setInitialLifecycleState(LifecycleState.RESUMED)
                    .build();
            mReactRootView.startReactApplication(mReactInstanceManager, "XXXReactNativeProject", null);
            return mReactRootView;
    }

3.View

 myReact= (LinearLayout) findViewById(R.id.myReact);//原生布局中的view 
 mReactInstanceManager = ReactInstanceManager.builder()
                    .setApplication(getActivity().getApplication())
                    .setBundleAssetName("index.android.bundle")
                    .setJSMainModuleName("index.android")
                    .addPackage(new MainReactPackage())
                    .setUseDeveloperSupport(BuildConfig.DEBUG)
                    .setInitialLifecycleState(LifecycleState.RESUMED)
                    .build();
 mReactRootView.startReactApplication(mReactInstanceManager, "XXXReactNativeProject", null);
 myReact.addView(mReactRootView)

目前，在5.0+手机系统中将React Native页面集成到Fragment中会报错，如下图所示，4.0+机子则没有任何问题，原因不解，欢迎留言。