鸿蒙next Navigation导航学习

星星之-哎

已于 2024-09-16 20:00:21 修改

阅读量1.8k

点赞数 22

CC 4.0 BY-SA版权

文章标签： harmonyos 学习华为

于 2024-09-16 19:57:29 首次发布

本文链接：https://blog.youkuaiyun.com/aixue2017/article/details/142306052

目前鸿蒙官网已经已经在逐步放弃@ohos.router下面放一张官网的截图：

这里做一个对比：

业务场景	Navigation	Router
一多能力	支持，Auto模式自适应单栏跟双栏显示	不支持
跳转指定页面	pushPath & pushDestination	pushUrl & pushNameRoute
跳转HSP中页面	支持	支持
跳转HAR中页面	支持	支持
跳转传参	支持	支持
获取指定页面参数	支持	不支持
传参类型	传参为对象形式	传参为对象形式，对象中暂不支持方法变量
跳转结果回调	支持	支持
跳转单例页面	支持	支持
页面返回	支持	支持
页面返回传参	支持	支持
返回指定路由	支持	支持
页面返回弹窗	支持，通过路由拦截实现	showAlertBeforeBackPage
路由替换	replacePath & replacePathByName	replaceUrl & replaceNameRoute
路由栈清理	clear	clear
清理指定路由	removeByIndexes & removeByName	不支持
转场动画	支持	支持
自定义转场动画	支持	支持，动画类型受限
屏蔽转场动画	支持全局和单次	支持设置pageTransition方法duration为0
geometryTransition共享元素动画	支持（NavDestination之间共享）	不支持
页面生命周期监听	UIObserver.on('navDestinationUpdate')	UIObserver.on('routerPageUpdate')
获取页面栈对象	支持	不支持
路由拦截	支持通过setInercption做路由拦截	不支持
路由栈信息查询	支持	getState() & getLength()
路由栈move操作	moveToTop & moveIndexToTop	不支持
沉浸式页面	支持	不支持，需通过window配置
设置页面标题栏（titlebar）和工具栏（toolbar）	支持	不支持
模态嵌套路由	支持	不支持

作为替代者，我个人认为Navigation 是面向未来的即跨端设备最好的路由方式，其中它解决了目前移动端最头疼的折叠屏的适配方式，当然你也会说解决移动端折叠屏还有其他的方式，但是目前就我所知华为这是最好的方式，下面我们简单的介绍一下Navigation的使用方式，从整个逻辑上来看和Jetpack 的路由也很像。下面详细介绍一下使用的方式：

第一步：首先是在主页面创建对应的容器：

这里红框标红的就是核心代码。有了对应的容器后，即可添加对应的跳转代码。这里我们使用pushPathByName()方法，这里要进行一个区别，就是pushPath 和 pushPathByName方法

对于我们初学者我们只需要关注对应的跳转方式就可以了，这里我的跳转方式如下：

第二步：

这样我们就完成了，需要调整的页面的相关工作，下面我们来看我们需要去的界面的相关配置：

第三步：

我们首页要声明入口的方法这里特别注意，我们的入口方法要和我们的json文件的名称保持一致：

第四步：

我们创建一个router_pages.json 文件，然后完成如下的操作方式：

这样就可以引入我们需要的json文件了，最后我们去json文件里操作。

这里一定要注意：buildFunction这个参数，后面的value一定要和去哪里的那个界面保持一致，不然很容易出现跳转失败的问题。

同样后续的跳转也是类似这样操作。好了一个简单的跳转方式就简单的介绍完了，后面会继续补充，我们对 Navigation的详细理解，包括和主页Tab 之间的处理，还有对代码的封装，如果避免json文件写错的情况导致问题排查的难度，还有如何进行自定义修改官方的UI样式。其他的像跳转动画之类的，我这里建议参考官方文档，官方文档介绍的相当详细。