HarmonyOS鸿蒙Next中Navigation根页面的生命周期

HarmonyOS鸿蒙Next中Navigation根页面的生命周期 我有一个页面（@Entry）的根容器名为A，里面使用了Navigation。

然后使用NavPathStack跳转到B界面，B界面使用NavDestination，然后点击B的返回按钮就回到了A。

我有个功能是每次显示A界面时会加载一些业务，A这个时候使用哪个API进行监听这个时机？

3 回复

Navigation 根页面和 NavDestination 不同，NavDestination 有 onWillAppear、onAppear、onShown 等一系列生命周期，而 Navigation 没有，只有一个 onNavBarStateChange 事件会在根页面显示和隐藏时触发。

所以要监听根页面的跳转，只能使用 onNavBarStateChange 事件来实现，示例如下：

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();
......

  build() {
    Navigation(this.pathStack) {
    ......
    }.title('主页面')
    .titleMode(NavigationTitleMode.Mini)
    .navDestination(this.pagesMap)
    // 根页面显示或隐藏时触发
    .onNavBarStateChange((isVisible: boolean) => {
      this.getUIContext().getPromptAction().showToast({ message: `isVisible ${isVisible}.` });
    })
  }
}

效果如下：

ScreenShot_20250515142628.gif

完整示例如下：

@Component
struct Page01 {
  pathStack: NavPathStack | undefined = undefined;

  build() {
    NavDestination() {
      Button(`push Page01`).width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pushPath({ name: 'Page01' });
        })
      Button(`pop`).width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pop();
        })
    }.title('Page01')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();

  @Builder
  pagesMap(name: string) {
    if (name == 'Page01') {
      Page01()
    }
  }

  build() {
    Navigation(this.pathStack) {
      Button(`push Page01`).width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pushPath({ name: 'Page01' });
        })
    }.title('主页面')
    .titleMode(NavigationTitleMode.Mini)
    .navDestination(this.pagesMap)
    // 根页面显示或隐藏时触发
    .onNavBarStateChange((isVisible: boolean) => {
      this.getUIContext().getPromptAction().showToast({ message: `isVisible ${isVisible}.` });
    })
  }
}

更多关于HarmonyOS鸿蒙Next中Navigation根页面的生命周期的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Navigation根页面的生命周期包括onPageShow、onPageHide、onPageActive和onPageInactive。onPageShow在页面显示时触发，onPageHide在页面隐藏时触发。onPageActive在页面获得焦点时触发，onPageInactive在页面失去焦点时触发。这些生命周期方法用于管理页面的状态和行为。

在HarmonyOS Next中，要监听Navigation根页面A的显示时机，可以使用onPageShow生命周期回调。具体实现如下：

  1. 在@Entry修饰的A页面组件中，添加onPageShow方法：
[@Entry](/user/Entry)
@Component
struct PageA {
  onPageShow() {
    // 这里执行每次页面显示时需要加载的业务逻辑
    console.log('PageA is shown');
    this.loadBusinessData();
  }

  loadBusinessData() {
    // 加载业务数据的实现
  }

  build() {
    Navigation() {
      // 页面内容
    }
  }
}

  1. 当从B页面返回A页面时，onPageShow会被自动触发，这是最合适的监听时机。

  2. 其他相关生命周期方法：

  • onPageHide：当页面被隐藏时触发（如跳转到B页面时）
  • aboutToAppear：组件即将出现时触发（只在创建时触发一次）
  • aboutToDisappear：组件即将消失时触发

注意：对于Navigation容器中的页面显示/隐藏事件，onPageShow和onPageHide是最准确的生命周期回调。

回到顶部