如何在React Native View中嵌入展示Android原生Activity内容

你当前的实现方式本身就无法达成需求：Android系统的startActivity API的作用就是将目标Activity作为独立页面加载到当前应用的任务栈中，你额外添加的Intent.FLAG_ACTIVITY_NEW_TASK还会直接开启新的任务栈，自然会全屏独立展示，不可能嵌入到指定View容器内。

你调研的Fragment改造方案是目前最稳定、兼容性最好的可行方案，具体实现步骤如下： #

步骤1：改造原有SampleActivity为Fragment #

你可以选择直接迁移业务代码，也可以保留原有Activity复用逻辑：

• 将SampleActivity中onCreate方法里的setContentView、初始化逻辑迁移到Fragment的onCreateView回调中，通过布局填充器返回对应的View实例即可
• 原有Activity中的其他生命周期逻辑（如onStart、onPause、权限申请、返回键处理等），都可以对应迁移到Fragment的同名生命周期回调中，业务逻辑几乎不需要做大量修改
• 如果需要保留原有Activity的入口，只需要在原有Activity的布局中加一个Fragment容器，直接加载改造好的Fragment即可，不影响原有功能的使用

步骤2：实现RN自定义原生View承载Fragment #

你需要创建一个Android原生的RN自定义View组件，作为Fragment的挂载容器：

1. 首先创建容器布局，继承FrameLayout即可：

public class SampleFragmentContainer extends FrameLayout {
    public SampleFragmentContainer(@NonNull Context context) {
        super(context);
    }
}

2. 实现对应的ViewManager，导出组件给RN端调用：

public class SampleFragmentViewManager extends SimpleViewManager<SampleFragmentContainer> {
    public static final String REACT_CLASS = "SampleFragmentView";

    @NonNull
    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @NonNull
    @Override
    protected SampleFragmentContainer createViewInstance(@NonNull ThemedReactContext reactContext) {
        SampleFragmentContainer container = new SampleFragmentContainer(reactContext);
        // 拿到当前附着的Activity实例，注意不能用ApplicationContext
        FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
        if (activity != null) {
            // 初始化你改造好的SampleFragment
            SampleFragment sampleFragment = new SampleFragment();
            // 将Fragment添加到容器中
            activity.getSupportFragmentManager()
                    .beginTransaction()
                    .add(container.getId(), sampleFragment)
                    .commit();
        }
        return container;
    }

    // 处理View销毁时的Fragment移除，避免内存泄漏
    @Override
    public void onDropViewInstance(@NonNull SampleFragmentContainer view) {
        super.onDropViewInstance(view);
        ReactContext reactContext = (ReactContext) view.getContext();
        FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
        if (activity != null && !activity.isDestroyed()) {
            Fragment fragment = activity.getSupportFragmentManager().findFragmentById(view.getId());
            if (fragment != null) {
                activity.getSupportFragmentManager().beginTransaction().remove(fragment).commit();
            }
        }
    }
}

3. 将该ViewManager注册到你的RN包的createViewManagers方法中。
4. RN端封装调用自定义组件：

import { requireNativeComponent, View } from 'react-native';
const SampleFragmentView = requireNativeComponent('SampleFragmentView');

// 直接在你的RN页面中使用即可，可以自由设置宽高、位置
const App = () => {
  return <View style={{flex:1}}>
    <SampleFragmentView style={{width: '100%', height: 400}} />
  </View>
}

其他注意事项 #

• 如果你实在不想改造Activity，理论上可以将Activity的DecorView直接挂载到RN的View容器中，但该方案会存在大量生命周期同步、触摸事件传递、窗口焦点冲突的问题，维护成本极高，不推荐使用
• 如果Fragment内需要和RN侧做数据交互，可以通过RN原生模块的回调、事件发送机制实现
• 如果你的原Activity依赖onActivityResult这类回调，改造为Fragment后直接使用Fragment的registerForActivityResult即可，逻辑一致

内容的提问来源于stack exchange，提问作者Wils