ionic使用tabsHideOnSubPages偶尔会无效

Posted 2023-04-18

参考技术A

在 ion-tabs 设置了 tabsHideOnSubPages 的情况下，在子页面刷新后偶尔会再次显示tabs。

查看源码得知，ionic判断子页面的逻辑是：在路由历史中，当前页面的index大于0则为子页面。
如果子页面的 @IonicPage 中没有设置 defaultHistory ，ionic将会判断此页面的index为0，就会出现刷新子页面后再次显示tabs的问题。
一般情况下子页面是要设置 defaultHistory 的，但是 defaultHistory 目前不支持传递参数，所以在某些情况下，可能子页面不设置 defaultHistory。

下面提供两种解决方法：

将子页面的 defaultHistory 设置为主页（home），或者是当前tab的根页面（在 ion-tab 设置的 root）。

如果子页面可能在不同的tab中被打开，无法确定其根页面的情况下，这时我们修改ionic判断子页面的逻辑即可。
判断当前页面是否为根页面，非根页面则隐藏tabs。

找到上面的源码，可以通过搜索 isTabSubPage 来定位。（ 修改ionic源码修复问题 ）

目前使用的是方案二+方案一，较符合项目需求，暂未发现问题。

ionic3在首页与子页面同使用tabs

import { App } from ‘ionic-angular‘;

 

请勿使用

this.navCtrl.push(nextPage);或者在app.module.ts设置tabsHideOnSubPages

需要先获取root页面，从root页面进行跳转即可：

this.app.getRootNav().push(nextPage);