React Native集成原生Android聊天Activity：不新建实例且保留底部Tab栏

我有一个基于Kotlin的原生Android聊天应用，想把它作为Android库集成到React Native（RN）项目里。RN应用带有底部Tab栏，共4个Tab，其中一个用来访问聊天功能。但用户点击聊天Tab时，会打开聊天Activity的新实例，导致RN底部Tab栏消失，聊天Activity全屏覆盖屏幕。怎么在RN应用里无缝显示原生Android聊天内容，既不隐藏Tab栏也不创建新的应用实例？

现有代码 #

1. 使用@react-navigation/bottom-tabs的Tabs组件 #

const WelcomePageTabs = ({ disabled, onListContainerPress, onSettingsScreenFocused }: IProps) => {
    const { t } = useTranslation();
    const RecentListScreen = useCallback(() =>
        (
            <RecentList
                disabled = { disabled }
                onListContainerPress = { onListContainerPress } />
        ), []);

    const calendarEnabled = useSelector(isCalendarEnabled);

    const CalendarListScreen = useCallback(() =>
        (
            <CalendarList
                disabled = { disabled } />
        ), []);

    const SettingsScreen = useCallback(() =>
        (
            <SettingsNavigationContainer
                isInWelcomePage = { true } />
        ), []);

    return (
        <WelcomePage.Navigator
            backBehavior = { 'none' }
            screenOptions = {{
                ...tabBarOptions,
                headerShown: false
            }}>
            <WelcomePage.Screen
                listeners = {{
                    tabPress: () => {
                        onSettingsScreenFocused(false);
                    }
                }}
                name = { screen.welcome.tabs.recent }
                options = {{
                    ...recentListTabBarOptions,
                    title: t('welcomepage.recentList')
                }}>
                { RecentListScreen }
            </WelcomePage.Screen>
            {
                calendarEnabled
            && <WelcomePage.Screen
                listeners = {{
                    tabPress: () => {
                        onSettingsScreenFocused(false);
                    }
                }}
                name = { screen.welcome.tabs.calendar }
                options = {{
                    ...calendarListTabBarOptions,
                    title: t('welcomepage.calendar')
                }}>
                { CalendarListScreen }
            </WelcomePage.Screen>
            }
             <WelcomePage.Screen
                listeners={{
                    tabPress: () => {
                        onSettingsScreenFocused(true);
                    },
                }}
                name={screen.settings.main}
                options={{
                    ...settingsTabBarOptions,
                    title: t("welcomepage.settings"),
                }}
            >
                {SettingsScreen}
            </WelcomePage.Screen>
            <WelcomePage.Screen
                listeners={{
                    tabPress: () => {
                        onSettingsScreenFocused(true);
                    },
                }}
                name={screen.integratedChat}
                options={{
                    ...chatTabBarOptions,
                    title: t("welcomepage.chat"),
                }}
            >
                {IntegratedChat}
            </WelcomePage.Screen>
        </WelcomePage.Navigator>
    );
};

2. 聊天组件IntegratedChat #

const IntegratedChat = () => {

  useEffect(() => {
    var chatActivity = NativeModules.ChatActivity;
    chatActivity.open();

    return () => {
    };
  }, []);

  return (
    <View>
      
    </View>
  );
};

3. Android原生Chat模块 #

public class ChatActivityModule  extends ReactContextBaseJavaModule {
    public ChatActivityModule (ReactApplicationContext reactContext){
        super(reactContext);
    }

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

    @ReactMethod
    public void open(){
        Intent intent = new Intent(getCurrentActivity(), VectorMainActivity.class);
        getCurrentActivity().startActivity(intent);
    }
}

4. Android清单配置 #

<activity ..
      android:launchMode= "singleTask" />

解决方案 #

核心问题是你直接启动了独立的Activity，它会完全覆盖RN所在的Activity，导致底部Tab栏消失。要实现无缝嵌入，需将聊天的原生内容作为视图组件嵌入RN页面，而非启动独立Activity。

步骤1：将聊天Activity重构为Fragment #

把原聊天Activity的核心内容迁移到Fragment中，让它可以灵活嵌入容器：

class ChatFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // 返回原聊天Activity的布局根视图
        return inflater.inflate(R.layout.chat_main_layout, container, false)
    }

    // 将原Activity的业务逻辑迁移到Fragment的生命周期方法中
    override fun onStart() {
        super.onStart()
        // 初始化聊天连接、加载数据等逻辑
    }
}

步骤2：创建RN可调用的原生容器视图 #

在Android库中创建继承自FrameLayout的容器，用来承载ChatFragment：

public class ChatView extends FrameLayout {
    private ChatFragment chatFragment;

    public ChatView(Context context) {
        super(context);
        init();
    }

    public ChatView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // 获取RN所在Activity的FragmentManager
        FragmentManager fragmentManager = ((AppCompatActivity) getContext()).getSupportFragmentManager();
        chatFragment = new ChatFragment();
        fragmentManager.beginTransaction()
                .add(getId(), chatFragment)
                .commit();
    }
}

步骤3：注册原生视图到RN #

创建ViewManager暴露ChatView给RN：

public class ChatViewManager extends SimpleViewManager<ChatView> {
    public static final String REACT_CLASS = "ChatView";

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

    @NonNull
    @Override
    protected ChatView createViewInstance(@NonNull ThemedReactContext reactContext) {
        return new ChatView(reactContext);
    }
}

在Package类中注册该ViewManager：

public class ChatPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        // 移除原ChatActivityModule，不再需要启动独立Activity
        return Collections.emptyList();
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Arrays.asList(new ChatViewManager());
    }
}

步骤4：在RN中使用原生聊天视图 #

修改IntegratedChat组件，直接渲染原生ChatView：

import { requireNativeComponent } from 'react-native';

// 对应原生注册的REACT_CLASS名称
const ChatView = requireNativeComponent('ChatView');

const IntegratedChat = () => {
  return (
    // 设置flex:1让视图填满Tab页面的剩余空间
    <ChatView style={{ flex: 1 }} />
  );
};

额外注意事项 #

• 若原聊天Activity有页面间跳转逻辑，需调整为Fragment内的导航，或通过RN的导航系统处理。
• 如需RN与原生聊天组件通信，可通过@ReactProp传递参数，或使用ReactContext的事件发射器发送消息。
• 移除Android清单中与聊天Activity相关的singleTask配置（如果不再需要独立启动它）。

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