HarmonyOS 鸿蒙Next navDestination 生命周期不走呢,我的页面

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next navDestination 生命周期不走呢,我的页面

cke_168.pngd这个是mainpage(也就是 底部的4 个tabbar,)cke_382.png我的页面 所有的生命周期都没走,当我点击我的页面的按钮跳转新页面,再次返回到我的页面  生命周期都不走,请大佬们指教

11 回复
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) =&gt; {
      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 &lt;= <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(() =&gt; {
  console.log(<span class="hljs-string">'=======MyPage====onWillAppear'</span>)
})
.onWillShow(() =&gt; {
  console.log(<span class="hljs-string">'=======MyPage====onWillShow'</span>)
})
.onShown(() =&gt; {
  console.log(<span class="hljs-string">'=======MyPage=====返回前台onShown'</span>)
})
.onWillHide(() =&gt; {
  console.log(<span class="hljs-string">'=======MyPage====onWillHide'</span>)
})
.onHidden(() =&gt; {
  console.log(<span class="hljs-string">'=======MyPage====去后台onHidden'</span>)
})
.onWillDisappear(() =&gt; {
  console.log(<span class="hljs-string">'=======MyPage===onWillDisappear'</span>)
})
.onAppear(() =&gt; {
  console.log(<span class="hljs-string">'=======MyPage====onAppear'</span>)
})
.onDisAppear(() =&gt; {
  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(() =&gt; {
        <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生命周期不走的问题,这通常与页面导航管理或生命周期回调处理有关。以下是一些可能的原因及检查点:

  1. 检查导航逻辑:确保在调用nextNavDestination方法时,传入的参数正确无误,且目标页面已正确配置在路由表中。

  2. 生命周期回调:验证目标页面的生命周期方法(如onPageStartonPageActive等)是否被正确调用。若未调用,可能是页面未正确实例化或激活。

  3. 页面栈管理:检查页面栈的状态,确保没有因为页面栈溢出或异常处理导致页面无法正确导航。

  4. 异常处理:查看日志输出,检查是否有异常抛出导致导航中断。异常可能源于数据传递、资源加载等问题。

  5. 版本兼容性:确认使用的HarmonyOS SDK版本与设备系统版本兼容,有时版本不匹配也会导致导航问题。

如果以上检查均无误,但问题依旧存在,可能是系统内部bug或特定环境下的表现。此时,建议联系官方客服进行进一步排查。

HarmonyOS鸿蒙Next高级实战已发布,可以先学学https://www.itying.com/goods-1204.html

回到顶部