HO与OH差异之Navigation二 原创

在上一篇章中我们先了解了一种HO(HarmonyOS)与OH(OpenHarmony)Navigation的差异，但是其实OH中还给我们提供了更多的跳转方式，今天我们来介绍一下OH与HO差异之二。
HarmonyOS我都简称为HO，OpenHarmony简称为OH。
其中在HO的Navigation中给我们使用的更为便捷但是OH中虽然与HO中有些差异但是大体还是差不多的，OH中还给我们提供了另外几种从Navigation派生出来的跳转方式，这里我们先了解一下Navigator。
Navigator简介：路由容器组件，提供路由跳转能力。可以包含子组件。
Navigator(value?: {target: string, type?: NavigationType})
其中在Navigator中只能包含一个子组件，也就是说如果我们写了一个Text又加上另外一个组件的话，它会直接报错。
接下来我们直接上代码进行演示：为了大家方便理解我会用最为简洁的代码为大家展示
[Navigator.mp4]
https://live.csdn.net/v/470933
@Entry
@Component
struct NavigatorPage {

build() {
Flex() {
Navigator({ target: “pages/Navigation/NavigatorPage2” , type: NavigationType.Push}) {
Column() {
Button(“点击进行Navigator跳转”)
}
.justifyContent(FlexAlign.Center)
}
Text(“我是Navigator主界面”)
}
}
}

typescript
@Entry
@Component
struct NavigatorPage2 {

build() {
Flex() {
Navigator({ target: “pages/Navigation/NavigatorPage” , type: NavigationType.Back}) {
Column() {
Text(“点击进行返回”)
}.width(“100%”).height(“100%”)
.justifyContent(FlexAlign.Center)
}
Text(“我是Navigator2页面”)
}
}
}
其中从代码及演示视频中我们可以看的出来他和Navigation跳转的差异，他跳转后的页面并没有"天然的"有返回的按钮，并且它需要跳转的子页面也必须是@Entry修饰的界面，也就是他这种方式更偏向于深度跳转。处于Navigator容器下的所有内容点击之后都会进行跳转。如下示例代码：

typescript
@Entry
@Component
struct NavigatorPage {

build() {
Flex() {
Navigator({ target: “pages/Navigation/NavigatorPage2” , type: NavigationType.Push}) {
Column() {
Button(“点击进行Navigator跳转”)
Text(“外婆也可以进行Navigator跳转”)
}
.justifyContent(FlexAlign.Center)
}
Text(“我是Navigator主界面”)
}
}
}

typescript
@Entry
@Component
struct NavigatorPage2 {

build() {
Flex() {
Navigator({ target: “pages/Navigation/NavigatorPage” , type: NavigationType.Back}) {
Column() {
Text(“点击进行返回”)
Button(“我也可以进行返回”)
Text(“我也可以进行返回”)
}.width(“100%”).height(“100%”)
.justifyContent(FlexAlign.Center)
}
Text(“我是Navigator2页面”)
}
}
}
从代码和演示图片中我们便可以知道处于Navigator下的内容点击都可以进行跳转。

Harmony OS NEXT / OpenHarmony API12
本次就暂时介绍这么多， 在下一篇内容中我会给大家介绍一下样式复用的修饰器
谢谢各位的观看，有错误不足的地方， 本人乐于接受各位的意见