HarmonyOS鸿蒙Next中使用Preview预览器发现Navigation子页面无法正常显示

HarmonyOS鸿蒙Next中使用Preview预览器发现Navigation子页面无法正常显示 使用Navigation跳转到子页面,Preview预览器无法正常显示子页面。请问是bug 吗,模拟器上正常显示,

cke_4131.png

cke_4486.png

cke_10129.png

代码如下:

import { hilog } from "@kit.PerformanceAnalysisKit";

export interface INavigationDestinationParam {
  id: string;
}

@Entry
@ComponentV2
struct Home {
  @Local
  private pages: NavPathStack = new NavPathStack();

  build() {
    Column() {
      Navigation(this.pages) {
        Index({ pages: this.pages})
      }
      .title('标题')
      .titleMode(NavigationTitleMode.Mini)
      .mode(NavigationMode.Stack)
      .hideBackButton(true)
    }
    .height('100%')
    .width('100%')
    .backgroundColor($r('sys.color.point_color_checked'))
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

@ComponentV2
struct Index {
  @Param @Require
  pages: NavPathStack;

  build() {
    Column() {
      Button('测试')
        .onClick(() => {
          this.pages.pushPathByName('detail', { id: '123' } as INavigationDestinationParam);
        })
    }
  }
}

@Builder
export function buildDetail(param: Object) {
  Detail({ detailId: (param as INavigationDestinationParam).id })
}
@Preview
@ComponentV2
struct Detail {
  @Param @Require
  detailId: string;
  pages: NavPathStack = new NavPathStack();

  aboutToAppear(): void {
    hilog.info(0, 'detail', 'about to appear: '+this.detailId)
  }

  build() {
    NavDestination() {
      Column() {
        Text('detail page: '+this.detailId)
      }
    }
    .title('详情')
    .onReady((context: NavDestinationContext) => {
      this.pages = context.pathStack;
    })
  }
}
routes.json
{
  "routerMap": [
    {
      "name": "detail",
      "pageSourceFile": "src/main/ets/pages/Home.ets",
      "buildFunction": "buildDetail"
    }
  ]
}

更多关于HarmonyOS鸿蒙Next中使用Preview预览器发现Navigation子页面无法正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

开发者您好,当前系统路由表支持模拟器但不支持预览器,可以使用自定义路由表验证Navigation跳转。

系统提供系统路由表自定义路由表两种实现方式。

  • 系统路由表相对自定义路由表,使用更简单,只需要添加对应页面跳转配置项,即可实现页面跳转。
  • 自定义路由表使用起来更复杂,但是可以根据应用业务进行定制处理。

支持自定义路由表和系统路由表混用。

不同路由方式适用于不同需求,易用性或可扩展性需根据项目特点权衡选择。

路由方式 跨包跳转能力 可扩展性 易用性
系统路由表 跳转前无需import页面文件,页面按需动态加载。 可扩展性一般。 易用性更强,系统自动维护路由表。
自定义路由表 跳转前需要import页面文件。 可扩展性更强。 易用性一般,需要开发者自行维护路由表。

若您对预览器支持系统路由表有强烈诉求,麻烦您增加说明一下原因,感谢您的理解与支持。

更多关于HarmonyOS鸿蒙Next中使用Preview预览器发现Navigation子页面无法正常显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我这边用的是 intel 的 mac,模拟器用不了,目前暂无真机,所以只能通过预览器调试界面,云调试太麻烦,希望能优化一下预览器。

尊敬的开发者,您好!您的问题已受理,请您耐心等待,感谢您的理解与支持!

在HarmonyOS Next中,Navigation子页面无法在Preview预览器正常显示,通常是由于预览器对Navigation组件栈式导航的模拟限制。需检查Navigation组件的页面路径配置是否正确,确保子页面路由已通过router.pushUrl方法正确定义。同时确认子页面组件是否已注册到当前Ability的配置文件中。预览器可能无法完整模拟Navigation的页面栈管理机制,建议在真机环境验证实际效果。

这是一个已知的Preview预览器限制,不是bug。Preview预览器目前对Navigation组件的动态页面跳转支持不完善,无法正确渲染通过NavPathStack动态压入的子页面。

从你的代码来看,路由配置和组件逻辑都是正确的,模拟器上正常运行也证明了这一点。Preview预览器更适合静态组件的快速预览,对于涉及动态导航栈操作的情况,建议:

  1. 在模拟器或真机上进行完整功能测试
  2. 对于Detail组件的UI预览,可以单独创建一个带@Preview的静态预览组件
  3. 通过条件渲染在Preview中模拟导航状态

当前Preview对Navigation的支持还在持续优化中,建议关注后续SDK版本更新。

回到顶部