HarmonyOS 鸿蒙Next Navigation使用问题
HarmonyOS 鸿蒙Next Navigation使用问题
咨询Navigation生命周期的问题,子页面NavDestination里面有onShown和onHidden生命周期,貌似Navigation主页面没有,主页面跳转到子页面时,主页面需要监听页面是否可见做对应的处理,想问下这个要怎么实现,感谢,具体的场景是主页上有一些数据请求的逻辑,在跳转到子页面,主页面不可见时不去请求数据,子页面回到主页面后再去请求数据
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使用问题,以下是一些可能的解答:
-
Navigation组件的作用:
- Navigation是路由容器组件,通常作为页面的根容器,支持单页面、分栏和自适应三种显示模式。
- 可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。
-
页面跳转与返回问题:
- Navigation路由跳转基于页面栈NavPathStack进行,支持页面跳转、返回、替换、删除等功能。
- 如果在跳转后按下返回键直接退出应用,可能是因为当前页面栈中只有一个页面。
- 使用replacePathByName方法替换当前页面时,注意页面栈的变化,以确保返回逻辑正确。
-
路由配置:
- 确保在项目的profile文件夹下正确配置了router_map.json5文件,并在module.json5中进行了相应引用。
- 每个需要导航的页面都应在router_map.json5中进行声明,并指定其构建函数。
如果以上解答无法完全解决您的问题,可能是您的具体场景或代码实现有所不同。建议您仔细检查代码和配置,或参考官方文档进行进一步排查。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html