鸿蒙Navigation处理启动页跳转到首页问题
在使用Navigation时时,你是否遇到了这样一个问题,Navigation加载启动页为入口,在启动页replace到首页,使首页替换换启动页,结果发现不生效,启动页依然存在。
为什么根页面启动页不能直接替换成首页
我们验证后发现当页面是Navigation的子页面时,是可以使用replace替换,当要替换根页面时,却发现不生产,这是因为我们使用NavPathStack只能操作子页面,根页面不在操作范围内,NavPathStack也不能操作根页面。所以不管是用replace,还是先push,再pop启动页,都是不生效的。
在Navigation中如何将启动页替换成首页
直接替换行不通,这里也有其它几种方式,第一种是Navigation根页面设置成首页,启动页跳到首页使用router的方式来处理。这种方式是可行的,但总觉得不是那么的完美,我都用Navigation了,为什么还要用router呢,官方一再强调不推荐使用router,推荐使用navigation。所以我们还有其它方式吗?
直接用Navigation替换不行,那我们自己手动来替换总行吧,在Navigation根页面加一个标签,首先加载启动页,然后更改标签的值,再去显示首页。我们以V2状态管理为例
@Entry
@ComponentV2
struct Index {
@Local isShowHome: boolean = false
build() {
Navigation() {
if (this.isShowHome) {
HomePage()
} else {
SplashPage({
onChangePage: () => {
this.isShowHome = true
}
})
}
}
}
}
@ComponentV2
export struct SplashPage {
@Event onChangePage: VoidCallback = () => undefined
aboutToAppear(): void {
setTimeout(() => {
this.onChangePage()
}, 1000)
}
build() {
Stack().width('100%').height('100%')
}
}
@ComponentV2
export struct HomePage {
build() {
Stack().width('100%').height('100%')
}
}
我们在启动页中使用@Event定义一个onChangePage事件,延时1秒后通知Navigation将根页面切换成首页。
这种方式虽然也可以,但总觉得还要手动通过if来切换页面,不是那么的优雅。为什么不能统一用NavPathStack来切换页面呢?不知道Navigation这么设计的原因是什么,不过大家想把启动页和首页也放在Navigation中统一管理,可以使用HMRouter这个三方库来处理,HMRouter是对Navigation做了封装,完成兼容Navigation。这几种方式都不太完美,要是需要单独特殊处理,要么需要引入三方库,大家结合自己的实际情况来选择吧。
鸿蒙Navigation处理启动页跳转到首页问题的更多相关文章
- iOS-APP启动页加载广告
概述 加载广告页, 展现跳过按钮实现倒计时功能, 并判断广告页面是否更新. 详细 代码下载:http://www.demodashi.com/demo/10698.html 目前市场上很多APP(如淘 ...
- 教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift)
教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift) 一.前言 用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 在iOS中,在 ...
- 【IOS】模仿"抽屉新热榜"动态启动页YFSplashScreen
IOS最好要设置系统默认启动页面,不然进入应用就会突然闪现黑色画面 下图是我们要实现的效果: 总体思路:设置一个系统默认启动页面,在进入didFinishLaunchingWithOptions时, ...
- android启动页优化实践
最近观看友盟统计发现App启动页跳出率很高,观看启动页的平均启动时间为2.8s,如下图: 所以一个很现实的问题就出来了,优化启动页面... (一)做了什么? 我们的启动页面主要用于展示启动页面,加载网 ...
- APP启动页
关于APP启动引导页面模块 时间:2016年6月14日 作者:赵锐 模块使用说明 模块暴露在外的接口是- (void)showGuideViewWithImages:(NSArray *)images ...
- iOS 快速集成启动页广告
前言 由于项目中要用到启动页广告,所以做了简单的研究,同时借鉴网易新闻和蘑菇街的交互写了一个简单的demo,现在写出来供大家参考,可能由于个人局限会有一些bug和不完善的地方,也希望大家能够友善提醒和 ...
- Android中启动页ViewPager和ViewFlipper带指示器
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 首先我们来分析一下,想要实现启动页的功能,大家第一个想到的就是使用ViewPager,使用ViewPager确实是一种比 ...
- App启动页倒计时功能
转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6753418.html 示例代码采用 RxJava + RxLifecycle + Data-Binding ...
- [Swift]LaunchScreen.storyboard设置启动页
设置[General]->[App Icons and Launch Images] 注意:当App不是用LaunchScreen.xib来配置启动页时,[LaunchScreen File]置 ...
- react native 第一次下载app的欢迎页+每次启动app的启动页设计
欢迎各位同学加入: React-Native群:397885169 大前端群:544587175 大神超多,热情无私帮助解决各种问题. 我想我写的这篇博文可以帮助到很多人,接下来要分享的东西,对app ...
随机推荐
- 聚焦OLAP性能提升,火山引擎ByteHouse发布六大场景解决方案
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群. 性能在数据分析中至关重要,它直接决定数据处理的效率与及时性,进一步对数据驱动的企业决策造成影响. 举个例 ...
- C# ?. 判斷Null值
有一句代碼: @Html.DisplayFor(modelItem => item.SellDate, "RegularDate") RegularDate.cshtml 內 ...
- Linux与windows共享文件的神器:samba
一.什么是samba? 搭建Samba服务器是为了实现Linux共享目录之后,在Windows可以直接访问该共享目录. 现在介绍如何在ubuntu 16.04系统中搭建Samba服务. 二 .samb ...
- Linux下简单几步安装AI开发环境-ROS(超有意思)
机缘巧合,接触到了一个开源的项目ROS,只需要根据一口君的操作,就可以很容易搭建一个具有3d效果的开发环境,非常有意思,和大家分享下. 0.什么是ROS ROS(Robot Operating Sys ...
- MySQL数据库基本操作包括MySQL过程、MySQL声明
MySQL数据库 操纵数据库 查看数据库 show databases; 创建数据库 create database <database_name>; 删除数据库 drop databas ...
- 组合逻辑环(Combinational Logic Loop)
组合逻辑电路 组合逻辑电路是数字电子学中一类基本的电路类型,它由一系列逻辑门组成,用于实现特定的逻辑功能.与时序逻辑电路不同,组合逻辑电路的输出完全取决于当前的输入信号,而不受之前输入的影响.换句话说 ...
- Python 在PDF中添加条形码、二维码
在PDF中添加条码是一个常见需求,特别是在需要自动化处理.跟踪或检索PDF文件时.作为一种机器可读的标识符,PDF中的条码可以包含各种类型的信息,如文档的唯一标识.版本号.日期等.以下是一篇关于如何使 ...
- frp_v0.37.1内网穿透,内网服务公网用不求人
前言: 公司内网无法访问,出差又需要用到公司内网进行办公,苦恼了好一阵.这时候想到了内网穿透,这就不得不提到几年前被安利的frp,一看GitHub竟然已经5年了,网上估计大把教程了. 那么什么是frp ...
- Angular 18+ 高级教程 – Component 组件 の 生命周期钩子 (Lifecycle Hooks)
前言 之前在 Component 组件 の Angular Component vs Custom Elements 文章中,我们有学习过几个基础的 Lifecycle Hooks. 比如 OnCha ...
- Vs Code, Visual Studio 2022, Angular and Live Server Running Through Https and IP Address
前言 之前就写过 angular cli, vs code liveserver, vs 2019 iis express 10, vs code kestrel 使用 https + ip. 但写的 ...