在使用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. 聚焦OLAP性能提升,火山引擎ByteHouse发布六大场景解决方案

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群.   性能在数据分析中至关重要,它直接决定数据处理的效率与及时性,进一步对数据驱动的企业决策造成影响.   举个例 ...

  2. C# ?. 判斷Null值

    有一句代碼: @Html.DisplayFor(modelItem => item.SellDate, "RegularDate") RegularDate.cshtml 內 ...

  3. Linux与windows共享文件的神器:samba

    一.什么是samba? 搭建Samba服务器是为了实现Linux共享目录之后,在Windows可以直接访问该共享目录. 现在介绍如何在ubuntu 16.04系统中搭建Samba服务. 二 .samb ...

  4. Linux下简单几步安装AI开发环境-ROS(超有意思)

    机缘巧合,接触到了一个开源的项目ROS,只需要根据一口君的操作,就可以很容易搭建一个具有3d效果的开发环境,非常有意思,和大家分享下. 0.什么是ROS ROS(Robot Operating Sys ...

  5. MySQL数据库基本操作包括MySQL过程、MySQL声明

    MySQL数据库 操纵数据库 查看数据库 show databases; 创建数据库 create database <database_name>; 删除数据库 drop databas ...

  6. 组合逻辑环(Combinational Logic Loop)

    组合逻辑电路 组合逻辑电路是数字电子学中一类基本的电路类型,它由一系列逻辑门组成,用于实现特定的逻辑功能.与时序逻辑电路不同,组合逻辑电路的输出完全取决于当前的输入信号,而不受之前输入的影响.换句话说 ...

  7. Python 在PDF中添加条形码、二维码

    在PDF中添加条码是一个常见需求,特别是在需要自动化处理.跟踪或检索PDF文件时.作为一种机器可读的标识符,PDF中的条码可以包含各种类型的信息,如文档的唯一标识.版本号.日期等.以下是一篇关于如何使 ...

  8. frp_v0.37.1内网穿透,内网服务公网用不求人

    前言: 公司内网无法访问,出差又需要用到公司内网进行办公,苦恼了好一阵.这时候想到了内网穿透,这就不得不提到几年前被安利的frp,一看GitHub竟然已经5年了,网上估计大把教程了. 那么什么是frp ...

  9. Angular 18+ 高级教程 – Component 组件 の 生命周期钩子 (Lifecycle Hooks)

    前言 之前在 Component 组件 の Angular Component vs Custom Elements 文章中,我们有学习过几个基础的 Lifecycle Hooks. 比如 OnCha ...

  10. 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. 但写的 ...