如何在React Native中不创建新实例的情况下打开本机Android Activity？

Question

我有一个基于 Kotlin 的原生 Android 聊天应用程序，我想将其作为 Android 库集成到我的 React Native 项目中。 React Native 应用程序有一个带有四个选项卡的底部选项卡栏，其中一个用于访问聊天功能。但是，当用户点击聊天选项卡时，它会打开聊天活动的新实例，导致 React Native 选项卡栏消失并且聊天活动覆盖屏幕。如何在 React Native 应用程序中无缝显示本机 Android 聊天活动，而不隐藏选项卡栏或创建应用程序的新实例？

以下是我的代码：

• 这是我的选项卡组件：

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>
    );
};

• 这是我的聊天组件：

const IntegratedChat = () => {

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

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

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

• 这是聊天模块：

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);
    }
}

我还在清单根目录的主要活动中添加了 singletask。

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

Answer 1

调整 AndroidManifest.xml 确认您的聊天活动配置为以单任务模式启动，这可以防止每次访问该活动时创建新实例您现有的设置似乎是正确的：

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

修改您的 React Native 代码更新 React Native 聊天模块中的代码以适当地处理活动启动，而不是每次按下聊天按钮时创建一个新实例，而是检查该活动是否已在活动堆栈中。如果是，请将其带到前面。 以下是如何在 React Native 聊天模块中实现此功能：

@ReactMethod
public void open() {
    Activity currentActivity = getCurrentActivity();
    if (currentActivity != null) {
        Intent intent = new Intent(currentActivity, VectorMainActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);
        currentActivity.startActivity(intent);
    }
}

通过进行这些调整，您可以确保点击 React Native 应用程序中的聊天按钮可以将现有的聊天活动无缝地带到最前面，从而避免不必要的实例创建。

我希望这些说明有助于解决您的问题。如果您有任何其他问题，请随时与我们联系。另外，如果我的解释看起来有点技术性，请原谅我——这是我第一次在 Stack Overflow 上提供帮助。