HarmonyOS鸿蒙Next中使用Navigation导航到下一个页面后没有内容显示

HarmonyOS鸿蒙Next中使用Navigation导航到下一个页面后没有内容显示 Index.ets

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  pathStack: NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack) {
      Column() {
        Button('Navigation 导航')
          .onClick(()=>{
            this.pathStack.pushPathByName('PageOne', null);
          })
      }

    }
    .height('100%')
    .width('100%')
  }
}

PageOne.ets

@Builder
export function PageOneBuilder() {
  PageOne()
}

@Component
export struct PageOne {
  // 从父页面接收导航栈
  @State pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Column() {
        Text('this page one')
          .fontSize(20)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

route_map.json

{
  "routerMap": [
    {
      "name": "PageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description" : "this is PageOne"
      }
    }
  ]
}

从Index页面点击后导航到PageOne时，页面左上角只有一个返回的箭头，但内容都是空白的，理论上应该会有一个Text内容。这个也是参考PageAndData04的示例，示例也是空白的。这个是为什么 。


更多关于HarmonyOS鸿蒙Next中使用Navigation导航到下一个页面后没有内容显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

好像是 PageOne页面没有加载进来，但不知道是哪儿出了问题。

更多关于HarmonyOS鸿蒙Next中使用Navigation导航到下一个页面后没有内容显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


如果在Index的Navigation加上

//.hideNavBar(true)
//.hideTitleBar(true)

则首页也无法显示内容。

这个应该是简单的一个导航，怎么一直是空白的页面。应该没有加载到 PageOne，但也没有异常的信息。

你可以放个大点的组件再加个边框看看效果，跳转成功了应该就不是路由的问题了

https://developer.huawei.com/consumer/cn/blog/topic/03198624212551012

执行了清理项目，也重新构建项目，在预览中还是无法显示内容。

使用系统路由表的方式，配置完成route_map.json后，需要手动 rebuild (重新编译) 项目后，才生效。

在HarmonyOS Next中，Navigation导航后页面无内容显示，可能由以下原因导致：

  1. 页面未正确注册：在module.json5中未声明目标页面路由。
  2. 路由路径错误：pushUrl参数与目标页面路径不匹配。
  3. 页面组件未导出：使用@Component装饰的页面未设置export default。
  4. 资源加载失败：页面依赖的HAR包或资源未正确引入。

检查导航代码：

router.pushUrl({
  url: 'pages/TargetPage'
})

确认目标页面路径配置与资源加载状态。

问题出在PageOne组件的定义和路由配置上。在HarmonyOS Next中，使用Navigation进行页面导航时，目标页面需要正确配置NavDestination。

主要问题分析：

  1. PageOne组件结构错误：PageOne组件不应该在NavDestination内部定义，而应该作为NavDestination的内容。

  2. 路由配置问题：buildFunction应该指向PageOne组件本身，而不是一个Builder函数。

修正方案：

PageOne.ets：

@Component
export struct PageOne {
  build() {
    Column() {
      Text('this page one')
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

route_map.json：

{
  "routerMap": [
    {
      "name": "PageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOne",
      "data": {
        "description": "this is PageOne"
      }
    }
  ]
}

删除PageOneBuilder函数，Navigation框架会自动将PageOne组件包装在NavDestination中。当点击导航按钮时，系统会基于路由配置正确渲染PageOne页面内容。

回到顶部