首页 > 其他分享 >鸿蒙Navigation处理启动页跳转到首页问题

鸿蒙Navigation处理启动页跳转到首页问题

时间:2024-10-31 11:32:26浏览次数:1  
标签:鸿蒙 启动 100% onChangePage 首页 跳转 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。这几种方式都不太完美,要是需要单独特殊处理,要么需要引入三方库,大家结合自己的实际情况来选择吧。

标签:鸿蒙,启动,100%,onChangePage,首页,跳转,Navigation,页面
From: https://www.cnblogs.com/zhaloe/p/18517371

相关文章

  • Taro 鸿蒙技术内幕系列(二):如何让 W3C 标准的 CSS跑在鸿蒙上
    作者:京东零售马银涛 基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测,本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景HarmonyOS采用自研的ArkUI框架作为原生UI开发方案,这套方案有完善的布局系统和样式控制,但是他的标准与W3C......
  • 【鸿蒙HarmonyOS实战:通过华为应用市场上架测试版App实现HBuilder X打包的UniApp项目的
    鸿蒙HarmonyOS实战:通过华为应用市场上架测试版App实现HBuilderX打包的UniApp项目的app转hap教程(邀请码)方式详解在使用uniapp打包的鸿蒙项目的过程中,由于生成的是app文件,而hdc传给鸿蒙HarmonyOS系统需要的是hap文件,hdc不能上传app文件,需要hap格式,或者通过华为应用市场下......
  • 鸿蒙IME Kit高级开发:共享沙箱机制与输入法数据传输
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。HarmonyOS的IMEKit不仅提供了基础......
  • 鸿蒙自定义编辑框与共享沙箱实现个性化输入法与编辑框的交互
    本文旨在深入探讨自定义编辑框与共享沙箱在跨应用数据共享方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在现代应用开发中,用户对于个性化体验......
  • 鸿蒙多语言智能输入法设计:动态切换子类型与实时翻译功能
    本文旨在深入探讨多语言智能输入法的设计与实现,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在全球化的今天,多语言智能输入法成为了人们跨语言交流的重要工......
  • 鸿蒙高安全性输入法的实现:基础模式与完整体验模式下的输入法功能适配
    本文旨在深入探讨高安全性输入法在基础模式与完整体验模式下的功能适配技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在当今数字化环境中,用户数据安......
  • 鸿蒙多语言智能输入法设计:动态切换子类型与实时翻译功能
    本文旨在深入探讨多语言智能输入法的设计与实现,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在全球化的今天,多语言智能输入法成为了人们跨语言交流的......
  • 鸿蒙IME Kit高级开发:共享沙箱机制与输入法数据传输
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。HarmonyOS的IMEKit不仅提供......
  • flutter鸿蒙项目初体验
    flutter鸿蒙项目初体验1.基础的环境变量配置#flutter基础环境配置exportPUB_HOSTED_URL=https://pub.flutter-io.cnexportFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn#拉取下来的flutter_flutter/bin目录exportPATH=/Users/admin/ohos/flutter_......
  • flutter开发适配鸿蒙之开发环境搭建
    第一:环境搭建1.安装DevEcoStudioNEXTIDE,注意版本应该是Next,当前最新的是Beta3.下载之前需要先登录,后面的模拟器创建还要开发者验证、审核啥的,好在审核进度还可以,我这边提交申请后差不多两个小时审核通过.找到自己电脑系统匹配的版本下载,我的电脑是Window的就选择......