HarmonyOS 鸿蒙Next 第一个NavRouter没有自动显示NavDestination内容

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

HarmonyOS 鸿蒙Next 第一个NavRouter没有自动显示NavDestination内容

首次加载Navigation组件所在的页面时,如果Navigation组件处于Split模式,Navigation组件会自动激活其第一个NavRouter孩子节点(后文会展开介绍NavRouter)来刷新Content区域的显示。

目前使用的时候发现并没有生效。是否该特性有变化?

demo

深色代码主题
复制
@Component

export struct NavRouterSample {

build() {

<span class="hljs-title class_">Navigation</span>() {

  <span class="hljs-title class_">NavRouter</span>() {

    <span class="hljs-title class_">Text</span>(<span class="hljs-string">"nav1"</span>)

    <span class="hljs-title class_">NavDestination</span>() {

      <span class="hljs-title class_">Text</span>(<span class="hljs-string">"content1"</span>)

    }

  }

  <span class="hljs-title class_">NavRouter</span>() {

    <span class="hljs-title class_">Text</span>(<span class="hljs-string">"nav2"</span>)

    <span class="hljs-title class_">NavDestination</span>() {

      <span class="hljs-title class_">Text</span>(<span class="hljs-string">"content2"</span>)

    }

  }

}.<span class="hljs-title function_">mode</span>(<span class="hljs-title class_">NavigationMode</span>.<span class="hljs-property">Split</span>)

}

}


更多关于HarmonyOS 鸿蒙Next 第一个NavRouter没有自动显示NavDestination内容的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

从API Version 10开始,推荐使用NavPathStack实现页面路由。参考应用导航设计:https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-application-navigation-design-V5

关于navrouter能否自动显示第一个content的特性,当前无法确认,本地尝试失效。

当前navrouter和NavPathStack右边的内容默认都不显示,但在NavPathStack中,可以在aboutToAppear生命周期push初始需要的页面即可。

参考案例如下:

深色代码主题
复制
@Component

struct NavDes {

  @Consume(‘pageInfos’) pageInfos: NavPathStack

  @Prop navRouter: number = 1

  build() {

    NavDestination() {

      Column() {

        Text(“NavDestination” + this.navRouter)

        Button(‘pushPathByName’, { stateEffect: true, type: ButtonType.Capsule })

          .width(‘80%’)

          .height(40)

          .margin(20)

          .onClick(() => {

          })

      }

      .width(‘100%’)

      .height(‘100%’)

      .backgroundColor(’#fff7f5f5’)

      .justifyContent(FlexAlign.Center)

      .alignItems(HorizontalAlign.Center)

    }

    .hideTitleBar(true)

    .title(“NavDestTitle” + this.navRouter)

    .onBackPressed(() => {

      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素

      console.log(‘pop’ + ‘返回值’ + JSON.stringify(popDestinationInfo))

      return true

    })

  }

}

@Entry

@Component

struct NavigationExample {

  @Provide(‘pageInfos’) pageInfos: NavPathStack = new NavPathStack()

  @State TooTmp: ToolbarItem = {

    ‘value’: “toolBar”,

    ‘icon’: $r(‘sys.media.ohos_app_icon’),

    ‘action’: () => {

    }

  }

  private arr: number[] = [1, 2, 3];

  aboutToAppear(): void {

    //当导航模式为分栏模式时且右边需要显示内容时,push需要的页面即可

    this.pageInfos.pushPath({ name: “pageOne1” }, false)

  }

  @Builder

  PageMap(name: string) {

    if (name === “pageOne1”) {

      NavDes({

        navRouter: 1

      })

    } else if (name === “pageOne2”) {

      NavDes({

        navRouter: 2

      })

    } else {

      NavDes({

        navRouter: 3

      })

    }

  }

  @Builder

  NavigationMenus() {

    Row() {

      Image($r(‘sys.media.ohos_ic_public_search_filled’))

        .width(24)

        .height(24)

      Image($r(‘sys.media.ohos_ic_public_add’))

        .width(24)

        .height(24)

        .margin({ left: 24 })

      Image($r(‘sys.media.ohos_ic_public_more’))

        .width(24)

        .height(24)

        .margin({ left: 24 })

    }

  }

  build() {

    Column() {

      Navigation(this.pageInfos) {

        TextInput({ placeholder: ‘search…’ })

          .width(“90%”)

          .height(40)

          .backgroundColor(’#FFFFFF’)

        List({ space: 12 }) {

          ForEach(this.arr, (item: number) => {

            ListItem() {

              Text(“NavRouter” + item)

                .width(“100%”)

                .height(72)

                .backgroundColor(’#FFFFFF’)

                .borderRadius(24)

                .fontSize(16)

                .fontWeight(500)

                .textAlign(TextAlign.Center)

                .onClick(() => {

                  this.pageInfos.pushPath({ name: pageOne<span class="hljs-subst">${item}</span> }, false)

                })

            }

          })

        }

        .width(“90%”)

        .margin({ top: 12 })

      }

      .navBarWidth(‘50%’)

      .title({ main: “主标题”, sub: “子标题” })

      //Stack为单页面显示模式,Split分栏显示模式

      .mode(NavigationMode.Split)

      .menus(this.NavigationMenus)

      .titleMode(NavigationTitleMode.Free)

      .toolbarConfiguration([this.TooTmp, this.TooTmp, this.TooTmp])

      .navDestination(this.PageMap)

    }

    .height(‘100%’)

    .width(‘100%’)

    .backgroundColor(’#F1F3F5’)

  }

}

更多关于HarmonyOS 鸿蒙Next 第一个NavRouter没有自动显示NavDestination内容的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,如果第一个NavRouter没有自动显示NavDestination内容,通常这可能是由于NavRouter配置不正确或NavDestination的初始化存在问题。

首先检查NavRouter的配置文件,确保已正确设置NavDestination的路径和参数。确认NavRouter的初始化代码中,已正确加载并解析配置文件。

其次,检查NavDestination的实例化过程,确保在NavRouter启动前,NavDestination已被正确创建并添加到路由表中。如果NavDestination依赖于某些条件或数据,确保这些条件或数据在NavRouter启动前已满足或已加载。

此外,检查是否有其他路由或组件影响了NavRouter的正常工作。有时,其他路由的优先级或拦截器可能会阻止NavDestination的显示。

最后,确认系统中没有其他错误或异常信息,这些信息可能会提供关于NavRouter未能正确显示NavDestination的线索。

如果上述检查均未能解决问题,可能是系统或框架层面的bug。此时,建议直接联系鸿蒙系统的官方支持团队或查阅最新的官方文档和更新。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部