如何关闭React Native页面并返回原生应用而不退出整个应用

该需求完全可实现，核心思路是通过React Native与原生端的通信机制，在RN侧触发返回事件后通知原生侧处理页面关闭逻辑，具体双端实现步骤如下：

问题原因说明 #

你尝试的两种方案本身定位就不符合需求：

• 你写的navigation.getBack()实际应为navigation.goBack()，该方法仅处理RN内部的导航栈回退，和原生页面栈完全隔离，无法触达原生页面逻辑
• BackHandler.exitApp()会直接终止当前应用进程，会连带关闭整个宿主原生App，自然不符合预期

具体实现步骤 #

1. React Native侧逻辑 #

在RN的返回按钮点击事件中，优先处理RN内部页面回退，没有待回退的RN页面时，调用原生暴露的通信方法通知原生关闭RN容器：

import { NativeModules, BackHandler } from 'react-native';

// 返回按钮点击回调
const handleBackToNative = () => {
  // 优先处理RN内部页面回退
  if (navigation.canGoBack()) {
    navigation.goBack();
    return;
  }
  // 调用原生约定的关闭RN页面方法，方法名可和原生端统一约定
  NativeModules.RNBridgeManager.closeRNPage();
}

// 可选：Android端适配系统物理返回键逻辑
useEffect(() => {
  const backListener = BackHandler.addEventListener(
    'hardwareBackPress',
    () => {
      handleBackToNative();
      return true; // 拦截系统默认返回行为
    }
  );
  return () => backListener.remove();
}, []);

2. Android端原生实现 #

创建RN桥接模块，暴露closeRNPage方法给RN调用，收到调用后关闭当前承载RN组件的Activity即可：

// 桥接模块类
@ReactModule(name = "RNBridgeManager")
public class RNBridgeModule extends ReactContextBaseJavaModule {
  public RNBridgeModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

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

  @ReactMethod
  public void closeRNPage() {
    Activity currentActivity = getCurrentActivity();
    if (currentActivity != null) {
      currentActivity.finish();
    }
  }
}

将该桥接模块注册到你项目的ReactPackage中即可生效。

3. iOS端原生实现 #

同样创建RN桥接模块，暴露方法后收到调用时，关闭当前承载RN组件的ViewController即可：

// 桥接模块头文件 RNBridgeManager.h
#import <React/RCTBridgeModule.h>

@interface RNBridgeManager : NSObject <RCTBridgeModule>
@end

// 桥接模块实现文件 RNBridgeManager.m
#import "RNBridgeManager.h"

@implementation RNBridgeManager

RCT_EXPORT_MODULE(RNBridgeManager);

RCT_EXPORT_METHOD(closeRNPage) {
  dispatch_async(dispatch_get_main_queue(), ^{
    // 取到当前承载RN的ViewController，根据容器显示方式执行对应关闭逻辑
    UINavigationController *nav = [UIApplication sharedApplication].keyWindow.rootViewController.navigationController;
    if (nav) {
      // push方式弹出的容器用pop
      [nav popViewControllerAnimated:YES];
      // present方式弹出的容器用下面的dismiss逻辑
      // [nav dismissViewControllerAnimated:YES completion:nil];
    }
  });
}

@end

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