HarmonyOS 鸿蒙Next router转Navigation
HarmonyOS 鸿蒙Next router转Navigation
1、我们这边是提供Hap包给主应用的,如果仅我们这边从router切换到了navigation,主应用那边还是用router可以做到兼容吗?
2、Navigation可以只用路由的能力,不用组件吗?每个页面都修改成本有点高
3、看到文档里面子页面需要用NavDestination组件,如果有个页面既是主页面,又是子页面要怎么处理呢?
更多关于HarmonyOS 鸿蒙Next router转Navigation的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
问题一:若需要router和Navigation混用,需要在router跳转到的页面使用Navigation组件重新开启新的Navigation
参考demo:
//index.ets (在main_page.json中注册)
@Entry
@Component
struct Index {
pageInfo: NavPathStack = new NavPathStack()
build() {
Navigation(this.pageInfo) {
Column() {
Button('StartTest', { stateEffect: true, type: ButtonType.Capsule })
.width('80%')
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pushPath({ name: 'pageOne' })
})
}
}.title('NavIndex')
}
}
//PageOne.ets (需要注册routermap)
import { router } from '@kit.ArkUI';
@Builder
export function PageOneBuilder(name: string, param: Object) {
PageOne()
}
@Component
struct PageOne {
pageInfo: NavPathStack = new NavPathStack();
@State message: string = 'pageOne'
aboutToAppear(): void {
}
build() {
NavDestination() {
Text(this.message)
.width('80%')
.height(50)
.margin(10)
Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
.width('80%')
.height(40)
.margin(10)
.onClick(()=>{
//使用router跳转到下一个页面
router.pushUrl({
url:"pages/PageRouterOne"
})
})
}
.height('100%')
.width('100%')
}
}
//PageRouterOne.ets (在main_page.json中注册)
@Entry
@Component
struct PageRouterOne {
pageInfo: NavPathStack = new NavPathStack();
@State message: string = 'Hello World';
build() {
Navigation(this.pageInfo) {
Text(this.message)
.id('PageRouterOneHelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: 'container', align: VerticalAlign.Center },
middle: { anchor: 'container', align: HorizontalAlign.Center }
})
Button("看看下面").onClick(()=>{
this.pageInfo.pushPath({name:"pageTwo"})
})
}
.height('100%')
.width('100%')
}
}
//PageTwo.ets(需要注册routermap)
@Builder
export function PageTwoBuilder(name: string, param: Object) {
PageOne()
}
@Component
struct PageOne {
pageInfo: NavPathStack = new NavPathStack();
@State message: string = 'pageTwo'
build() {
NavDestination() {
Text(this.message)
.width('80%')
.height(50)
.margin(10)
Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
.width('80%')
.height(40)
.margin(10)
}
.height('100%')
.width('100%')
}
}
//router_map.json
{
"routerMap": [
{
"name": "pageOne",
"pageSourceFile": "src/main/ets/pages/PageOne.ets",
"buildFunction": "PageOneBuilder",
"data": {
"description": "this is pageOne"
}
},
{
"name": "pageTwo",
"pageSourceFile": "src/main/ets/pages/PageTwo.ets",
"buildFunction": "PageTwoBuilder"
}
]
}
问题二:可以只使用导航的能力,不过子页面仍然是通过NavDestination来定义 , 问题三:一个页面既是主页面又是子页面,相当于Navigation 里的某个 NavDestination 包含自己的 NavPathStack ,多个navigation需要声明多个NavPathStack。
更多关于HarmonyOS 鸿蒙Next router转Navigation的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
官网demo 使用模拟器跑报错是什么原因
在HarmonyOS鸿蒙系统中,Next router转Navigation的过程主要涉及到路由管理机制的迁移。HarmonyOS提供了其独特的路由框架,用于在应用内部实现页面跳转和参数传递。
Next router是早期或特定项目中可能使用的路由管理方式,而Navigation则是HarmonyOS推荐使用的路由机制。要实现从Next router到Navigation的转换,你需要:
-
理解当前路由结构:首先,分析现有项目中Next router的使用情况,包括路由配置、页面跳转逻辑以及参数传递方式。
-
配置Navigation路由:根据HarmonyOS的Navigation路由框架,重新配置路由表。这包括定义页面路径、参数类型以及页面间的跳转关系。
-
修改页面跳转代码:将原来使用Next router进行页面跳转的代码,替换为Navigation提供的API。这通常涉及到调用新的路由跳转方法,并传递相应的参数。
-
测试与验证:在完成转换后,进行全面的测试,确保所有页面跳转功能正常,参数传递无误。
-
清理旧代码:在确认新路由机制运行稳定后,可以逐步清理与Next router相关的旧代码。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html