在使用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. AtCoder Beginner Contest 311

    Toyota Programming Contest 2023#4(AtCoder Beginner Contest 311) A - First ABC (atcoder.jp) 记录一下\(ABC ...

  2. SMU Spring 2023 Trial Contest Round 9

    A. Wrong Subtraction  在k次操作里, 将n的最后一位数减1,如果是0就去掉,模拟一下就好了. #include <bits/stdc++.h> //#define i ...

  3. 牛客周赛 Round 6

    牛客周赛 Round 6 A-游游的数字圈_牛客周赛 Round 6 (nowcoder.com) 枚举即可 #include <bits/stdc++.h> #define int lo ...

  4. Linux命令cURL详解,并实现文件定时上传到ftp服务器的程序

    前言 前段时间群里讨论,想实现某个文件定时上传到服务器要怎么来实现.我记得之前做过 一个项目:为高通的iot模组编写FOTA功能:实现模组可以远程下载升级镜像包,实现版本升级功能.并当时使用的一个超级 ...

  5. 【2019年第一篇总结】之Mac安装Python系列软件目录汇总

    1.第一步,安装Python环境 <[Mac + Python]苹果系统之安装Python3.6.x环境> 2.安装PyCharm并激活 <[转载][Pycharm编辑器破解步骤]之 ...

  6. SpringBoot启动异常:Reason: Failed to determine a suitable driver class

    程式之前都运行正常,忽然一天运行报错: *************************** APPLICATION FAILED TO START ************************ ...

  7. Scikit-learn从入门到放弃

    目录 Scikit-learn简介 SVM分类 随机森林回归 K-means聚类 前置建议阅读: 1.NumPy从入门到放弃 2.Pandas从入门到放弃 3.SciPy从入门到放弃 Scikit-l ...

  8. 使用 Dependify 工具探索 .NET 应用程序依赖项

    在大型项目中,由于各种组件的复杂性和互连性,管理依赖项可能变得具有挑战性.如果没有适当的工具或文档,可能很难浏览项目并对依赖项做出假设.以下是在大型项目中难以导航项目依赖项的几个原因: 复杂性:大型项 ...

  9. c程序设计语言 by K&R(四)输入与输出

    一.标准输入.输出 1. 简单的输入\输出机制 从标准输入中一次读取一个字符:int getchar(void) 将字符c送到标准输出中: int putchar(int) 2. 输入重定向 如果程序 ...

  10. Angular 学习笔记 (Typescript 版本更新)

    记入每一期我会用到的功能 : v4.3  1. getter setter 的类型可以不一样咯, 这个困扰很久了.  (interface, object, class 都可以这样用) class T ...