网站首页 > 技术教程 正文
在使用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。这几种方式都不太完美,要是需要单独特殊处理,要么需要引入三方库,大家结合自己的实际情况来选择吧。
- 上一篇: 系统安装不求人,制作U盘启动工具—Rufus教程
- 下一篇: 返回按钮和关闭按钮,你用的对吗?
猜你喜欢
- 2024-11-17 电视看着看着就跳回主页怎么回事?内存该清清了
- 2024-11-17 动态首页:超灵活体验,随心而变(4008188080/95738指南针动态全赢体验版)
- 2024-11-17 Windows版Xbox应用迎来全新主页:包含游戏、优惠、推荐等内容
- 2024-11-17 长虹智能电视开机进入开机直达的方法
- 2024-11-17 奕控教育|触摸屏画面切换和模板的概念
- 2024-11-17 如何通过网上国网APP查询日用电量
- 2024-11-17 R星官网移除《Agent》图标 网址跳转R星主页
- 2024-11-17 短信跳转小程序首页和指定页面?跳转小程序有哪些类型?
- 2024-11-17 原域名所有页面都跳转到新域页首页会有什么影响?
- 2024-11-17 创建页面并实现无刷新页面跳转(创建新的页面)
你 发表评论:
欢迎- 最近发表
-
- Win11学院:如何在Windows 11上使用WSL安装Ubuntu
- linux移植(Linux移植freemodbus)
- 独家解读:Win10预览版9879为何无法识别硬盘
- 基于Linux系统的本地Yum源搭建与配置(ISO方式、RPM方式)
- Docker镜像瘦身(docker 减小镜像大小)
- 在linux上安装ollama(linux安装locale)
- 渗透测试系统Kali推出Docker镜像(kali linux渗透测试技术详解pdf)
- Linux环境中部署Harbor私有镜像仓库
- linux之间传文件命令之Rsync傻瓜式教程
- 解决ollama在linux中安装或升级时,通过国内镜像缩短安装时长
- 标签列表
-
- 下划线是什么 (87)
- 精美网站 (58)
- qq登录界面 (90)
- nginx 命令 (82)
- nginx .http (73)
- nginx lua (70)
- nginx 重定向 (68)
- Nginx超时 (65)
- nginx 监控 (57)
- odbc (59)
- rar密码破解工具 (62)
- annotation (71)
- 红黑树 (57)
- 智力题 (62)
- php空间申请 (61)
- 按键精灵 注册码 (69)
- 软件测试报告 (59)
- ntcreatefile (64)
- 闪动文字 (56)
- guid (66)
- abap (63)
- mpeg 2 (65)
- column (63)
- dreamweaver教程 (57)
- excel行列转换 (56)
本文暂时没有评论,来添加一个吧(●'◡'●)