HO与OH差异之Navigation

在上一篇的内容中我们进一步的了解了Navigation的用法,但是既然写到这里了我就再来扩充一下有关Navigation的内容。

HarmonyOS与OpenHarmony之间有些写法与内容是有差异的,就比如Navigation的跳转。以下内容中HarmonyOS我都简称为HO,OpenHarmony简称为OH。

在HO中我们的Navigation跳转是通过路由池也就是NavPathStack可以直接进行跳转,但是假如我们做了一个项目迁移会发现,在OH中并没有这么的简单。

其中有两个方式进行路由跳转。

一:再定义一个NavPushHelper类型的参数并且将它new出来,因为他是一个类,其中我们可以传递我们在HO定义的路由池也就是我们定义的NavPathStack,将这个变量定义出来后只需要再次通过这个变量我们就可以实现在HO中路由跳转的方式。其实这种方式相当于一个中转站,将HO与OH的差异通过这个"中转站"进行了转化,示例如下:

less 复制代码
import { NavPushPathHelper } from '@ohos.atomicservice.NavPushPathHelper'

@Entry
@Component
struct NavigationPage1 {
  @Provide('NavPathStack') pathInfos: NavPathStack = new NavPathStack()
  @Provide("helper") helper: NavPushPathHelper = new NavPushPathHelper(this.pathInfos)

  build() {
    Navigation(this.pathInfos) {
      Text("我是Navi的1页面")
      Button("点击进行跳转")
        .onClick(() => {
          this.helper.pushPathByName("entry", "Navigation2", "")
        })
    }
    .height('100%')
    .width('100%')
  }
}
scss 复制代码
@Builder
function Navigation2Builder() {
  Navigation2()
}

@Component
struct Navigation2 {
  build() {
    NavDestination() {
      Text("我是页面2")
    }
  }
}

其中从图片中我们便可以看出已经是成功的跳转了,从我们的代码上来看似乎也就多写一步,不过确实是多谢一步,但是当我们用pushPathByName时,发现他所需的参数会和HO有所不同,他所需的第一个参数时我们的模块名称,也就是说它可以直接的传递模块名字直接进行跳转。如下示例:

scss 复制代码
@Builder
function IndexBuilder() {
  Index()
}

@Entry
@Component
struct Index {

  build() {
    NavDestination() {
      Text("我是Hsp包中的NavDestination")
    }
    .height('100%')
  }
}

这第一种方式的用法非常与HO相似

不过也别忘了在module.json5中绑定对应的路由池啥的。

Harmony OS NEXT / OpenHarmony API12

本次就暂时介绍这么多, 在下一篇内容中我会给大家介绍一下样式复用的修饰器

谢谢各位的观看,有错误不足的地方, 本人乐于接受各位的意见

相关推荐
lbb 小魔仙13 小时前
【HarmonyOS实战】React Native 表单实战:在 OpenHarmony 上构建高性能表单
react native·华为·harmonyos
一只大侠的侠15 小时前
React Native开源鸿蒙跨平台训练营 Day16自定义 useForm 高性能验证
flutter·开源·harmonyos
早點睡39016 小时前
高级进阶 React Native 鸿蒙跨平台开发:@react-native-community-slider 滑块组件
react native·react.js·harmonyos
一只大侠的侠16 小时前
Flutter开源鸿蒙跨平台训练营 Day11从零开发商品详情页面
flutter·开源·harmonyos
一只大侠的侠17 小时前
React Native开源鸿蒙跨平台训练营 Day18自定义useForm表单管理实战实现
flutter·开源·harmonyos
一只大侠的侠17 小时前
React Native开源鸿蒙跨平台训练营 Day20自定义 useValidator 实现高性能表单验证
flutter·开源·harmonyos
听麟18 小时前
HarmonyOS 6.0+ 跨端智慧政务服务平台开发实战:多端协同办理与电子证照管理落地
笔记·华为·wpf·音视频·harmonyos·政务
前端世界18 小时前
从单设备到多设备协同:鸿蒙分布式计算框架原理与实战解析
华为·harmonyos
一只大侠的侠19 小时前
Flutter开源鸿蒙跨平台训练营 Day12从零开发通用型登录页面
flutter·开源·harmonyos
前端不太难20 小时前
HarmonyOS App 工程深水区:从能跑到可控
华为·状态模式·harmonyos