HarmonyOS 鸿蒙Next navDestination 生命周期不走呢,我的页面
HarmonyOS 鸿蒙Next navDestination 生命周期不走呢,我的页面
import { PublicConstants, TabBarInformation } from '../common/constants/PublicConstants'
import { window } from '@kit.ArkUI'
import HomePage from './home/controller/HomePage'
import ServePage from './serve/controller/ServePage'
import LifePage from './life/controller/LifePage'
import MyPage from './my/controller/MyPage'
import { CommonConstants } from '../common/constants/CommonConstants'
@Entry
@Component
struct MainPage {
@State tabBarIndex: number = 0
private tarBarController: TabsController = new TabsController();
//TODO:---------- 这里创建数据双向同步的父组件
@Provide(‘pageStack’) pageStack: NavPathStack = new NavPathStack()
windowClass?: window.Window
async setFullScreen(flag: boolean) {
if (!this.windowClass) {
this.windowClass = await window.getLastWindow(getContext(this))
}
this.windowClass.setWindowLayoutFullScreen(flag)
}
onPageShow(): void {
//TODO:----------展示协议弹窗
this.setFullScreen(true)
}
onPageHide(): void {
this.setFullScreen(false)
}
build() {
Navigation(this.pageStack) {
Tabs({ index: this.tabBarIndex, controller: this.tarBarController }) {
TabContent() {
HomePage({ message: $r(<span class="hljs-string">'app.string.tabs_home'</span>) })
}
TabContent() {
ServePage({ message: $r(<span class="hljs-string">'app.string.tabs_serve'</span>) })
}
TabContent() {
LifePage({ message: $r(<span class="hljs-string">'app.string.tabs_life'</span>) })
}
TabContent() {
MyPage({ message: $r(<span class="hljs-string">'app.string.tabs_my'</span>) })
}
}
.barHeight(<span class="hljs-number">0</span>)
.scrollable(<span class="hljs-literal">false</span>)
.backgroundColor(Color.White)
}
<span class="hljs-comment">//TODO:---------- top数值与状态栏区域高度保持一致;bottom数值与导航条区域高度保持一致</span>
<span class="hljs-comment">// .bottomHeightStyle()</span>
.mode(NavigationMode.Stack) <span class="hljs-comment">//单页面显示模式</span>
.size({ width: CommonConstants.FULL_WIDTH, height: CommonConstants.FULL_WIDTH })
.backgroundColor(Color.White)
.title(<span class="hljs-keyword">this</span>.title())
.titleMode(NavigationTitleMode.Mini)
.hideBackButton(<span class="hljs-literal">true</span>)
.hideTitleBar(<span class="hljs-literal">true</span>)
.toolbarConfiguration(<span class="hljs-keyword">this</span>.tabBarBuilder())
}
@Builder
title() {
Row() {
Text(‘首页’)
.fontSize(20)
}
.width(CommonConstants.FULL_WIDTH)
.height(56)
.backgroundColor(Color.White)
.justifyContent(FlexAlign.Center)
}
@Builder
tabBarBuilder() {
Row() {
ForEach(PublicConstants.TABBAR, (item: TabBarInformation, index: number) => {
Column({ space: 4 }) {
Image(this.tabBarIndex === index ? item.activeImgUrl : item.imgUrl).height(item.size).width(item.size)
Text(item.text).fontColor(this.tabBarIndex === index ? “#1296db” : Color.Gray).fontSize(12)
}
// .padding({ left: 20, right: 20 })
.padding({ left: 20, right: 20 ,top: 8})
.onClick(() => {
this.tabBarIndex = index
this.tarBarController.changeIndex(index)
})
})
}
.width(‘100%’)
.height(80)
.alignItems(VerticalAlign.Top)
.justifyContent(FlexAlign.SpaceAround)
.border({ width: { top: “1px” }, style: BorderStyle.Solid, color: $r(‘app.color.color_CCCCCC’) })
.backgroundColor(Color.White)
}
}
@Styles
function bottomHeightStyle() {
.padding({ bottom: Number(AppStorage.get(‘bottomHeight’)) })
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
import NavPage from “…/…/…/components/NavPage”;
import MyApploc from “…/view/MyApploc”;
import MyHeader from “…/view/MyHeader”;
import MyPackage from “…/view/MyPackage”;
import ServicesAndTools from “…/view/ServicesAndTools”;
import { router, window } from ‘@kit.ArkUI’
import { CommonConstants } from “ets/common/constants/CommonConstants”;
import { PageConstant } from “ets/common/constants/PageConstant”;
import { PreferencesUtil } from “@pura/harmony-utils”;
import { UserDefault } from “…/…/…/common/constants/UserDefault”;
import { LoginModel } from “…/…/…/Model/LoginModel”;
@Entry
@Component
export default struct MyPage {
@Prop message: ResourceStr = ‘’
@State isShowNav: boolean = false
// 创建Scroll对象
private scroller: Scroller = new Scroller();
// Scroll的偏移量
@State scrollOffset: number = 0;
// 状态栏组件的透明度
@State headOpacity: number = 0;
// 透明度默认值
private opacityDefaultValue: number = 1;
// 透明度计算基数
private opacityComputeRadix: number = 35;
@Consume pageStack: NavPathStack
aboutToAppear(): void { //在组件的build()函数之前执行
console.log(’============NavDestination 的 所有生命周期 都不走 好像 我记得====’)
console.log(’============无论是切换底部tabbar, 还是跳转页面 都不走====’)
console.log(’============首页 办事 生活, 同样的额问题,====’)
let userInfo = PreferencesUtil.getSync(UserDefault.USERINFO, ‘’) as LoginModel
console.log(’=======MyPage====aboutToAppear ==========’,userInfo.userName)
}
build() {
NavDestination() {
Stack({ alignContent: Alignment.TopStart }) {
<span class="hljs-comment">//顶部悬浮导航栏</span>
<span class="hljs-keyword">this</span>.nav()
Scroll(<span class="hljs-keyword">this</span>.scroller) {
Column() {
<span class="hljs-comment">// NavPage({title: this.message})</span>
Column() {
<span class="hljs-comment">//TODO:----------头部</span>
MyHeader()
<span class="hljs-comment">//TODO:----------我的办件</span>
MyPackage()
}
.width(CommonConstants.FULL_WIDTH)
.linearGradient({
colors: [
[<span class="hljs-number">0xCDEBFF</span>, <span class="hljs-number">0.0</span>], [<span class="hljs-number">0xFDFEFF</span>, <span class="hljs-number">1.0</span>]
]
})
<span class="hljs-comment">//TODO:----------我的应用</span>
MyApploc()
<span class="hljs-comment">//TODO:----------服务和工具</span>
ServicesAndTools()
<span class="hljs-comment">//TODO: ------测试自定义键盘</span>
<span class="hljs-comment">// this.keyboardView()</span>
}
.width(CommonConstants.FULL_WIDTH)
}
.width(CommonConstants.FULL_WIDTH)
.scrollBar(BarState.Off) <span class="hljs-comment">//滚动条常驻显示</span>
.onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
console.info(<span class="hljs-string">'纵向滚动偏移量----- '</span> + <span class="hljs-keyword">this</span>.scroller.currentOffset().yOffset)
<span class="hljs-comment">// TODO 知识点:显隐变化效果,获取Scroll偏移量,计算透明度,实现效果</span>
<span class="hljs-keyword">this</span>.scrollOffset = <span class="hljs-keyword">this</span>.scroller.currentOffset().yOffset;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.scrollOffset <= <span class="hljs-keyword">this</span>.opacityComputeRadix) {
<span class="hljs-keyword">this</span>.headOpacity = <span class="hljs-keyword">this</span>.scrollOffset / <span class="hljs-keyword">this</span>.opacityComputeRadix;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.headOpacity = <span class="hljs-keyword">this</span>.opacityDefaultValue;
}
})
}
.height(CommonConstants.FULL_HEIGHT)
.width(CommonConstants.FULL_WIDTH)
}
.hideTitleBar(<span class="hljs-literal">true</span>)
.height(CommonConstants.FULL_HEIGHT)
.width(CommonConstants.FULL_WIDTH)
.backgroundColor(Color.White)
.onWillAppear(() => {
console.log(<span class="hljs-string">'=======MyPage====onWillAppear'</span>)
})
.onWillShow(() => {
console.log(<span class="hljs-string">'=======MyPage====onWillShow'</span>)
})
.onShown(() => {
console.log(<span class="hljs-string">'=======MyPage=====返回前台onShown'</span>)
})
.onWillHide(() => {
console.log(<span class="hljs-string">'=======MyPage====onWillHide'</span>)
})
.onHidden(() => {
console.log(<span class="hljs-string">'=======MyPage====去后台onHidden'</span>)
})
.onWillDisappear(() => {
console.log(<span class="hljs-string">'=======MyPage===onWillDisappear'</span>)
})
.onAppear(() => {
console.log(<span class="hljs-string">'=======MyPage====onAppear'</span>)
})
.onDisAppear(() => {
console.log(<span class="hljs-string">'=======MyPage====onDisAppear'</span>)
})
}
@Builder
nav() {
Column() {
Row() {
Text(’**玥’)
.fontColor($r(‘app.color.color_3D3D3D’))
.fontSize(CommonConstants.DEFAULT_18)
.fontWeight(CommonConstants.FONT_WEIGHT_600)
.margin({ right: 15 })
Image($r(<span class="hljs-string">'app.media.ysm'</span>)).width(<span class="hljs-number">64</span>).height(<span class="hljs-number">22</span>)
Blank()
Image($r(<span class="hljs-string">'app.media.setting'</span>))
.width(<span class="hljs-number">23</span>)
.height(<span class="hljs-number">20</span>)
.onClick(() => {
<span class="hljs-comment">// Navgation With PageUrl</span>
<span class="hljs-keyword">this</span>.pageStack.pushPathByName(PageConstant.Url_User_Setting_Page, <span class="hljs-literal">null</span>, <span class="hljs-literal">true</span>)
})
}
.width(CommonConstants.FULL_WIDTH)
.height($r(<span class="hljs-string">'app.float.search_Height'</span>))
.borderRadius(<span class="hljs-number">17</span>)
}
.width(CommonConstants.FULL_WIDTH)
.height(<span class="hljs-built_in">Number</span>(AppStorage.get(<span class="hljs-string">'bottomHeight'</span>)) + <span class="hljs-number">60</span>)
.backgroundColor(Color.White)
.zIndex(<span class="hljs-number">1</span>)
.opacity(<span class="hljs-keyword">this</span>.headOpacity)
.justifyContent(FlexAlign.End)
.padding({ left: <span class="hljs-number">15</span>, right: <span class="hljs-number">15</span>, bottom: <span class="hljs-number">10</span> })
}
}
好的,我先看一下,稍等
你的demo太少了跑起来无法正常运行,大致看了下代码,navigation和tabs组合使用的时候有点不正常。
我这边试了2个周期 都是正常运行的。检查下你的代码,或者提供下你的demo,继续分析
demo:
NavDestination() {
Column() {
Text("NavDestinationContent2")
}.width('100%').height('100%')
}.title("NavDestinationTitle2")
.onWillAppear(()=>{
console.log('bbbbbbbbbbbbbbbb onWillAppear')
})
.onWillShow(()=>{
console.log('bbbbbbbbbbbbbbb onWillShow')
})
日志:
I bbbbbbbbbbbbbbbb onWillAppear
I bbbbbbbbbbbbbbb onWillShow
你好我该怎么把demo 发给你呢
回帖的时候可以上传附件,或者直接贴代码
格式不支持, 无语了
我该怎么解释呢。我用 navagation 写的 tabbar,(首页,办事, 生活,我的),子页面是 NavDestination ,但是这四个(首页,办事, 生活,我的)页面的 NavDestination 的 生命周期 无响应,(以我的页面为例子:点击 登录 或者 设置 push 到下一个页面,在 pop 回来,我想刷新 我的页面,但是生命周期 没有一个触发的。我尽力解释了, 我有demo)
你哪设置tabbar了。。。你这写的就不正常
在HarmonyOS鸿蒙系统中,如果遇到nextNavDestination
生命周期不走的问题,这通常与页面导航管理或生命周期回调处理有关。以下是一些可能的原因及检查点:
-
检查导航逻辑:确保在调用
nextNavDestination
方法时,传入的参数正确无误,且目标页面已正确配置在路由表中。 -
生命周期回调:验证目标页面的生命周期方法(如
onPageStart
、onPageActive
等)是否被正确调用。若未调用,可能是页面未正确实例化或激活。 -
页面栈管理:检查页面栈的状态,确保没有因为页面栈溢出或异常处理导致页面无法正确导航。
-
异常处理:查看日志输出,检查是否有异常抛出导致导航中断。异常可能源于数据传递、资源加载等问题。
-
版本兼容性:确认使用的HarmonyOS SDK版本与设备系统版本兼容,有时版本不匹配也会导致导航问题。
如果以上检查均无误,但问题依旧存在,可能是系统内部bug或特定环境下的表现。此时,建议联系官方客服进行进一步排查。
HarmonyOS鸿蒙Next高级实战已发布,可以先学学:https://www.itying.com/goods-1204.html