HarmonyOS RN 项目中页面返回事件的自定义处理

RN HarmonyOS项目中,假如 RN 内使用了 Navigation,那么 RN 内的路由返回会和原生路由返回产生冲突,默认情况下返回可以分为两种情况:

  1. 从 RN Navigation 的根页面返回;
  2. 从 RN Navigation 的子页面返回。

第1种情况下,会执行默认的 Router 或 Navigation 的返回逻辑;第2种情况下,正常逻辑应该返回 RN Navigation 栈内的上一个页面,但实际上会发现,此时会直接返回上一个原生页面(如果当前页面非路由栈根页面),并未走 RN Navigation 内部的返回逻辑。

原生侧的路由架构又分为 Router 和 Navigation 两种场景,需要根据实际情况进行处理。

1.调用 rnohCoreContext.dispatchBackPress()

为了触发 RN Navigation 内部的返回逻辑,需要在原生 RN 容器页面的返回方法中调用 this.rnohCoreContext!.dispatchBackPress(),如果使用的是 Router:

onBackPress(): boolean | undefined {
  this.rnohCoreContext!.dispatchBackPress()
  return true
}

如果使用的是原生 Navigation:

NavDestination() {
  ...
  }
  .onBackPressed(() => {
    this.rnohCoreContext!.dispatchBackPress();
    return true;
  }

2. dispatchBackPress 的执行流程

调用了 rnohCoreContext!.dispatchBackPress() 虽然能够正常执行 RN Navigation 内的返回逻辑,但是此时从 RN Navigation 首页侧滑会直接退出应用,这是因为执行了 dispatchBackPress 的默认行为,这显然不是我们想要的效果,因此我们要修改 spatchBackPress 的实现逻辑。

首先让我们梳理一下 rnohCoreContext!.dispatchBackPress() 的执行流程:

  1. rnohCoreContext.dispatchBackPress()
  2. rnInstance.onBackPress()
  3. rnohContext.invokeDefaultBackPressHandler()
  4. rnInstanceImpl.backPressHandler() 或 rnAbility.defaultBackPressHandler()

其中第3、4步,只有从 RN Navigation 首页返回时才会触发。所以此时不做进一步处理 RN Navigation 内部的返回逻辑也会正常执行。

第4步中,如果在创建 RNInstance 时实现了它的 backPressHandler,就会执行 backPressHandler;否则,会执行 rnAbility.defaultBackPressHandler()。因此,有两种方法可以自定义 RN Navigation 首页的返回事件。

HarmonyOS
22h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

根据上面的分析,可以总结返回事件的处理方法如下:

  1. 在 Page 的 onBackPress 或 Navdestination 的 onBackPressed 中执行 this.rnohCoreContext!.dispatchBackPress(),他会调用 RNInstance 的 backPressHandler 或 RNAbility 的 defaultBackPressHandler 方法(代码见第1节);
  2. 实现 RN 容器页面的返回逻辑:
  • Router 场景:1)在 EntryAbility 中重写 RNAbility 的 defaultBackPressHandler,执行 router.back(); 2)或者在 RNInstance 的 backPressHandler 中执行 router.back()。

    protected defaultBackPressHandler(): void {
      router.back();
    }
    
  • Navigation 场景:在 RNInstance 的 backPressHandler 中执行 this.pagePaths.pop(),pagePaths 是 Navigation 的路由栈。

    RNApp({
      rnInstanceConfig: {
        createRNPackages,
        enableNDKTextMeasuring: true,
        enableBackgroundExecutor: true,
        enableCAPIArchitecture: true,
        arkTsComponentNames: arkTsComponentNames,
        backPressHandler:(() => {
          this.pagePaths.pop();
          // router.back();  // Router 场景
        }
      },
      ...
    
分享
微博
QQ
微信
回复
19h前
相关问题
HarmonyOS RN 项目中使用自定义字体
2浏览 • 0回复 待解决
HarmonyOS RN如何拦截返回事件
151浏览 • 1回复 待解决
HarmonyOS 自定义组件事件处理
509浏览 • 1回复 待解决
返回按钮是否可以自定义事件
383浏览 • 1回复 待解决
HarmonyOS 页面返回事件如何监听
131浏览 • 1回复 待解决
HarmonyOS 子窗口页面返回事件无效
147浏览 • 1回复 待解决
HarmonyOS 组件是否支持自定义事件
250浏览 • 1回复 待解决
HarmonyOS webview自定义长按手势事件
255浏览 • 1回复 待解决