HarmonyOS 鸿蒙Next router转Navigation

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

HarmonyOS 鸿蒙Next router转Navigation

router转Navigation有几个问题需要咨询:
1、我们这边是提供Hap包给主应用的,如果仅我们这边从router切换到了navigation,主应用那边还是用router可以做到兼容吗?
2、Navigation可以只用路由的能力,不用组件吗?每个页面都修改成本有点高
3、看到文档里面子页面需要用NavDestination组件,如果有个页面既是主页面,又是子页面要怎么处理呢?
 


更多关于HarmonyOS 鸿蒙Next router转Navigation的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题一:若需要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 使用模拟器跑报错是什么原因

cke_692.png

在HarmonyOS鸿蒙系统中,Next router转Navigation的过程主要涉及到路由管理机制的迁移。HarmonyOS提供了其独特的路由框架,用于在应用内部实现页面跳转和参数传递。

Next router是早期或特定项目中可能使用的路由管理方式,而Navigation则是HarmonyOS推荐使用的路由机制。要实现从Next router到Navigation的转换,你需要:

  1. 理解当前路由结构:首先,分析现有项目中Next router的使用情况,包括路由配置、页面跳转逻辑以及参数传递方式。

  2. 配置Navigation路由:根据HarmonyOS的Navigation路由框架,重新配置路由表。这包括定义页面路径、参数类型以及页面间的跳转关系。

  3. 修改页面跳转代码:将原来使用Next router进行页面跳转的代码,替换为Navigation提供的API。这通常涉及到调用新的路由跳转方法,并传递相应的参数。

  4. 测试与验证:在完成转换后,进行全面的测试,确保所有页面跳转功能正常,参数传递无误。

  5. 清理旧代码:在确认新路由机制运行稳定后,可以逐步清理与Next router相关的旧代码。

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

回到顶部