鴻蒙Navigation處理啟動頁跳轉到首頁問題

龙儿筝發表於2024-10-31
鴻蒙Navigation

在使用Navigation時時，你是否遇到了這樣一個問題，Navigation載入啟動頁為入口，在啟動頁replace到首頁，使首頁替換換啟動頁，結果發現不生效，啟動頁依然存在。

為什麼根頁面啟動頁不能直接替換成首頁

我們驗證後發現當頁面是Navigation的子頁面時，是可以使用replace替換，當要替換根頁面時，卻發現不生產，這是因為我們使用NavPathStack只能操作子頁面，根頁面不在操作範圍內，NavPathStack也不能操作根頁面。所以不管是用replace，還是先push，再pop啟動頁，都是不生效的。

在Navigation中如何將啟動頁替換成首頁

直接替換行不通，這裡也有其它幾種方式，第一種是Navigation根頁面設定成首頁，啟動頁跳到首頁使用router的方式來處理。這種方式是可行的，但總覺得不是那麼的完美，我都用Navigation了，為什麼還要用router呢，官方一再強調不推薦使用router，推薦使用navigation。所以我們還有其它方式嗎？

直接用Navigation替換不行，那我們自己手動來替換總行吧，在Navigation根頁面加一個標籤，首先載入啟動頁，然後更改標籤的值，再去顯示首頁。我們以V2狀態管理為例

@Entry
@ComponentV2
struct Index {
  @Local isShowHome: boolean = false

  build() {
    Navigation() {
      if (this.isShowHome) {
        HomePage()
      } else {
        SplashPage({
          onChangePage: () => {
            this.isShowHome = true
          }
        })
      }
    }
  }
}

@ComponentV2
export struct SplashPage {
  @Event onChangePage: VoidCallback = () => undefined

  aboutToAppear(): void {
    setTimeout(() => {
        this.onChangePage()
      }, 1000)
  }

  build() {
    Stack().width('100%').height('100%')
  }
}

@ComponentV2
export struct HomePage {

  build() {
    Stack().width('100%').height('100%')
  }
}

我們在啟動頁中使用@Event定義一個onChangePage事件，延時1秒後通知Navigation將根頁面切換成首頁。

這種方式雖然也可以，但總覺得還要手動透過if來切換頁面，不是那麼的優雅。為什麼不能統一用NavPathStack來切換頁面呢？不知道Navigation這麼設計的原因是什麼，不過大家想把啟動頁和首頁也放在Navigation中統一管理，可以使用HMRouter這個三方庫來處理，HMRouter是對Navigation做了封裝，完成相容Navigation。這幾種方式都不太完美，要是需要單獨特殊處理，要麼需要引入三方庫，大家結合自己的實際情況來選擇吧。

相關文章