HarmonyOS 鸿蒙Next中两个页面路由跳转问题

【问题现象】

Navigation跳转至NavDestination页面跳转无法触发onPageShow、onPageHide、onBackPress等生命周期回调函数，如何监听页面的显示隐藏？

【背景知识】

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件）。

[@ohos.arkui.observer(无感监听)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-observer)提供UI组件行为变化的无感监听能力。如页面生命周期、组件显隐状态、滚动事件等。其中uiObserver.on(‘navDestinationSwitch’)可以监听Navigation的页面切换事件并执行自定义操作。

【解决方案】

使用Navigation跳转的页面不会走onPageShow生命周期，onPageShow、onPageHide、onBackPress等生命周期回调函数，仅对@Entry装饰的自定义组件生效，NavDestination提供了onShown、onHidden、onBackPressed等属性可以设置对应的回调函数，通过这些属性监听页面的显示隐藏，示例如下：

@Component
struct page {
  build() {
    NavDestination() {
      // ...
    }
    // 当NavDestination即将构建子组件之前会触发此回调。
    .onShown(() => {
      // ...
    })
    // 当该NavDestination页面隐藏时触发此回调。
    .onHidden(() => {

    })
    // 当与Navigation绑定的导航控制器中存在内容时，此回调生效。当点击返回键时，触发该回调。
    .onBackPressed(() => {
      return true
    })
  }
}

如果想监听首页Navigation页面切换，可以使用uiObserver.on(‘navDestinationSwitch’)方法监听Navigation的页面切换事件，可在入参配置页面切换的回调函数。示例如下：

import { uiObserver } from '@kit.ArkUI';

function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {
  let from = JSON.stringify(info.from)
  let to = JSON.stringify(info.to)
  console.info(`from:${from} -------- to: ${to}`);
}

@Entry
@Component
struct NavObserverDemo {
  private stack: NavPathStack = new NavPathStack();

  @Builder
  Page(name: string) {
    PageOne()
  }

  aboutToAppear() {
    uiObserver.on('navDestinationSwitch', this.getUIContext(), callBackFunc); // 注册页面切换的监听
  }

  aboutToDisappear() {
    uiObserver.off('navDestinationSwitch', this.getUIContext(), callBackFunc);
  }

  build() {
    Navigation(this.stack) {
      Button('跳转').onClick(() => {
        this.stack.pushPath({ name: 'pageOne' });
      })
    }
    .title('Navigation')
    .navDestination(this.Page)
  }
}

@Component
export struct PageOne {
  build() {
    NavDestination() {
      Text('pageOne')
    }.title('pageOne')
  }
}