在使用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处理启动页跳转到首页问题的更多相关文章

  1. iOS-APP启动页加载广告

    概述 加载广告页, 展现跳过按钮实现倒计时功能, 并判断广告页面是否更新. 详细 代码下载:http://www.demodashi.com/demo/10698.html 目前市场上很多APP(如淘 ...

  2. 教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift)

    教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift) 一.前言 用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 在iOS中,在 ...

  3. 【IOS】模仿"抽屉新热榜"动态启动页YFSplashScreen

    IOS最好要设置系统默认启动页面,不然进入应用就会突然闪现黑色画面 下图是我们要实现的效果: 总体思路:设置一个系统默认启动页面,在进入didFinishLaunchingWithOptions时, ...

  4. android启动页优化实践

    最近观看友盟统计发现App启动页跳出率很高,观看启动页的平均启动时间为2.8s,如下图: 所以一个很现实的问题就出来了,优化启动页面... (一)做了什么? 我们的启动页面主要用于展示启动页面,加载网 ...

  5. APP启动页

    关于APP启动引导页面模块 时间:2016年6月14日 作者:赵锐 模块使用说明 模块暴露在外的接口是- (void)showGuideViewWithImages:(NSArray *)images ...

  6. iOS 快速集成启动页广告

    前言 由于项目中要用到启动页广告,所以做了简单的研究,同时借鉴网易新闻和蘑菇街的交互写了一个简单的demo,现在写出来供大家参考,可能由于个人局限会有一些bug和不完善的地方,也希望大家能够友善提醒和 ...

  7. Android中启动页ViewPager和ViewFlipper带指示器

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   首先我们来分析一下,想要实现启动页的功能,大家第一个想到的就是使用ViewPager,使用ViewPager确实是一种比 ...

  8. App启动页倒计时功能

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6753418.html 示例代码采用 RxJava + RxLifecycle + Data-Binding ...

  9. [Swift]LaunchScreen.storyboard设置启动页

    设置[General]->[App Icons and Launch Images] 注意:当App不是用LaunchScreen.xib来配置启动页时,[LaunchScreen File]置 ...

  10. react native 第一次下载app的欢迎页+每次启动app的启动页设计

    欢迎各位同学加入: React-Native群:397885169 大前端群:544587175 大神超多,热情无私帮助解决各种问题. 我想我写的这篇博文可以帮助到很多人,接下来要分享的东西,对app ...

随机推荐

  1. JAVA for Cplex(更新版)

    一.Cplex的介绍 Cplex是一种专门用来求解大规模线性规划问题的求解工具.不仅仅是LP问题,对于二次规划 QP,二次有约束规划QCP,混合整数线性规划MIP问题,甚至Network Flow问题 ...

  2. 结构开发笔记(三):solidworks软件(二):小试牛刀,绘制一个立方体

    前言   solidworks草图大师,基本的使用过程.  所有的零件基础都是从平面绘制开始,然后凸出来厚度.  本篇绘制一个简单的立方体,熟悉基本操作.   立方体绘制过程   选取一个平面绘制一个 ...

  3. 解决Perforce lua文件utf-8 with bom

    设置typemap,将lua文件定义为unicode

  4. programmers model

    Handler模式一直使用MSP,所以在handler模式下处理器会忽略SPSEL位:异常进入及返回机制会更新CONTROL寄存器. 在操作系统的环境中,推荐线程在Thread模式下运行使用PSP,内 ...

  5. 开关中断与cpsid/cpsie指令

    在汇编代码中,CPSID   CPSIE  用于快速的开关中断. I:IRQ中断;    F:FIQ中断最常见的这两个命令的使用处是在关中断.开中断的实现中,我们经常用的local_irq_enabl ...

  6. JuiceFS 在多云架构中加速大模型推理

    在大模型的开发与应用中,数据预处理.模型开发.训练和推理构成四个关键环节.本文将重点探讨推理环节.在之前的博客中,社区用户 BentoML 和贝壳的案例提到了使用 JuiceFS 社区版来提高模型加载 ...

  7. Python if __name__ == "__main__" 解释

    一种机制,允许脚本以不同的方式运行,这取决于作为独立的程序执行还是作为模块被其他脚本导入.这种机制就是 if __name == "__main__" 其作用是控制某些代码块只在该 ...

  8. sentinel中如何使用@SentinelResource和openFeign来进行服务熔断和降级的操作

    sentinel 前方参考 计算QPS-Sentinel限流算法 https://www.cnblogs.com/yizhiamumu/p/16819497.html Sentinel 介绍与下载使用 ...

  9. 真人模特失业?AI虚拟试衣一键成图,IDM-VTON下载介绍

    在电商行业竞争尤为激烈的当下,除了打价格战外,如何有效的控制成本,是每个从业者都在思考的问题 IDM-VTON是一个AI虚拟换装工具,旨在帮助服装商家解决约拍模特导致的高昂成本问题,只需一张服装图片, ...

  10. 小tips:docker 配置国内镜像地址

    在配置文件daemon.json中添加国内镜像,让其下载加速. vi /etc/docker/daemon.json 如下国内镜像: { "registry-mirrors": [ ...