鸿蒙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 ...
随机推荐
- dfs剪枝与优化
搜索树 剪枝方法 1.优化搜索顺序 2.排除等效冗余 3.可行性 4.最优性(估价) 5.记忆化(树形不会重复计算时不需要) A.针对每个维度边界信息缩放.推倒 B.计算未来最少花费 C.结合各维度的 ...
- 编译器实现之旅——第十三章 if语句和while语句的代码生成器分派函数的实现
在上一章的旅程中,我们已经实现了表达式类代码生成器分派函数,而在这一章的旅程中,我们将要实现if语句和while语句的代码生成器分派函数.if语句和while语句是两种典型的带有跳转指令的语句.观察C ...
- manim边学边做--曲线类
manim中曲线,除了前面介绍的圆弧类曲线,也可以绘制任意的曲线. manim中提供的CubicBezier模块,可以利用三次贝塞尔曲线的方式绘制任意曲线. 关于贝塞尔曲线的介绍,可以参考:https ...
- Vue配置代理(devServer)解决跨域问题
1.作用: Vue官方文档的解释是: 如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器.这个问题可以通过 vue.config.j ...
- Serilog文档翻译系列(四) - 结构化数据
Serilog 是一种序列化器.在许多情况下,它具有良好的默认行为,能够满足其目的,但有时也需要指示 Serilog 如何存储附加到日志事件上的属性. Serilog 使用一些不寻常的术语来指代 .N ...
- C++ 高效使用智能指针的8个建议
C++ 高效使用智能指针的8个建议 前言:智能指针是C++11提供的新特性,它基于RAII实现,可以自动管理内存资源,避免内存泄漏的发生,但是智能指针也并不是万能的,如果不正确使用智能指针,也会导致内 ...
- parser.add_argument
parser.add_argument 在解析参数时,有个地方很值得注意. --dict-name,会把dict-name解析为变量dict_name.也就是说会把破折号转成下划线.
- frp_v0.37.1内网穿透,内网服务公网用不求人
前言: 公司内网无法访问,出差又需要用到公司内网进行办公,苦恼了好一阵.这时候想到了内网穿透,这就不得不提到几年前被安利的frp,一看GitHub竟然已经5年了,网上估计大把教程了. 那么什么是frp ...
- Google Maps Embed API & JavaScript API
前言 很多年前写过一篇 Google Map 谷歌地图, 这篇算是翻新版本. Google Map Registration Google Maps Platform 是整个 Google Map 的 ...
- Dart 2.14 版现已发布
支持 Apple Silicon,增加了默认的 lint.更好的工具和新的语言功能提高生产力. 本月,我们发布了 Dart SDK 2.14 的正式版,新的版本旨在通过独特的可移植性.生产力和稳健性组 ...