HarmonyOS 鸿蒙Next Navigation使用问题

HarmonyOS 鸿蒙Next Navigation使用问题

咨询Navigation生命周期的问题,子页面NavDestination里面有onShown和onHidden生命周期,貌似Navigation主页面没有,主页面跳转到子页面时,主页面需要监听页面是否可见做对应的处理,想问下这个要怎么实现,感谢,具体的场景是主页上有一些数据请求的逻辑,在跳转到子页面,主页面不可见时不去请求数据,子页面回到主页面后再去请求数据

2 回复

onPageShow()方法仅在[@Entry](/user/Entry)装饰的自定义组件中生效,由于子页面并不是使用[@Entry](/user/Entry)修饰的,所以在关闭子页面时并不会触发主页面的onPageShow()方法。
通过对Navigation相关接口以及文档资料的翻阅,找到了以下两种方式触发主页面的onPageShow()
1、监听Navigation的onNavBarStateChange()事件,在回调中判断显示隐藏:
参考文档如下:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#onnavbarstatechange9
2、使用无感监听observer.on('navDestinationUpdate'):
在主页面中添加上述监听,在回调方法中进行判断:①、判断结果中的name是否等于紧跟主页面之后打开的子页面;②、判断state状态是否等于1
参考文档如下:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-observer-0000001820880765#ZH-CN_TOPIC_0000001811317170__observeronnavdestinationupdate
参考示例如下:
NavigationTestPage.ets

import { PageOneTmp } from './PageOne'
import observer from '@ohos.arkui.observer'
[@Entry](/user/Entry)
[@Component](/user/Component)
struct NavigationTestPage {
  [@Provide](/user/Provide)('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  aboutToAppear(): void {
    observer.on('navDestinationUpdate', (info) => {
      console.info('------>NavDestination state update', JSON.stringify(info));
    });
  }
  aboutToDisappear(): void {
    observer.off('navDestinationUpdate');
  }
  [@Builder](/user/Builder)
  PageMap() {
    PageOneTmp()
  }
  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'pageOne' }) //将name指定的NavDestination页面信息入栈
          })
      }
    }.title('NavIndex').navDestination(this.PageMap)
    .onNavBarStateChange((isVisible: boolean) => {
      console.info('------>isVisible:' + isVisible)
    })
  }
  onPageShow(): void {
    console.info('------>主页显示')
  }
} 

PageOne.ets

[@Component](/user/Component)
export struct PageOneTmp {
  [@Consume](/user/Consume)('pageInfos') pageInfos: NavPathStack;
  build() {
    NavDestination() {
      Column() {
        Button('clear', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.clear() //清除栈中所有页面
          })
      }.width('100%').height('100%')
    }.title('pageOne')
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
  }
} 

更多关于HarmonyOS 鸿蒙Next Navigation使用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对您提出的HarmonyOS 鸿蒙Next Navigation使用问题,以下是一些可能的解答:

  1. Navigation组件的作用

    • Navigation是路由容器组件,通常作为页面的根容器,支持单页面、分栏和自适应三种显示模式。
    • 可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
  2. 页面跳转与返回问题

    • Navigation路由跳转基于页面栈NavPathStack进行,支持页面跳转、返回、替换、删除等功能。
    • 如果在跳转后按下返回键直接退出应用,可能是因为当前页面栈中只有一个页面。
    • 使用replacePathByName方法替换当前页面时,注意页面栈的变化,以确保返回逻辑正确。
  3. 路由配置

    • 确保在项目的profile文件夹下正确配置了router_map.json5文件,并在module.json5中进行了相应引用。
    • 每个需要导航的页面都应在router_map.json5中进行声明,并指定其构建函数。

如果以上解答无法完全解决您的问题,可能是您的具体场景或代码实现有所不同。建议您仔细检查代码和配置,或参考官方文档进行进一步排查。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部