Ionic 4 - iOS 状态栏与顶部选项卡重叠

Question

我正在尝试在我的应用顶部创建一个标签栏，没有明显的标题，但 iOS 状态栏与其重叠。我尝试将 ion-tabs 标签包装在具有填充但不起作用的 ion-content 标签中。我将标签包裹在一个解决填充问题的标题中，但随后标签加载的页面在标题内消失了。

我看过所有关于标题重叠的帖子，但那是几年前的事了，已经在 ion 4 中修复了，而且解决方案无论如何都不适用于标签。

如何在不移除状态栏的情况下解决这个问题？

iOS 版本：11.4.1

离子版本：4.0.5

重新创建：

• 创建离子标签启动项目
• 将选项卡位置更改为顶部

• 删除 home.html 中的标头

  <ion-tabs tabsPlacement="top">
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  </ion-tabs>
  

Answer 1

在阅读和玩过@Bilow's answer 之后，我发现只需为整个ion-tabs 元素添加边距就足够了，如下所示：

ion-tabs {
  margin-top: var(--ion-safe-area-top);
}

这为 iOS 上的状态栏增加了空间。在已经正常运行的 Android 上，没有任何变化，因此此修复适用于跨平台。

Answer 2

只需稍加努力，您就可以继续使用ion-tabs。这是我想出的：

1. 添加到您的全局 scss（或任何需要的地方）

global.scss

.plt-ios {
  ion-tab-bar {
    padding-top: var(--ion-safe-area-top);
  }

  ion-header ion-toolbar.noSafeAreaPaddingTop{
    padding-top: 0 !important;
  }
}

1. 使用ion-toolbar 将“noSafeAreaPaddingTop”类添加到每个标签页

YourPageTemplate.html

<ion-header>
  <ion-toolbar class='noSafeAreaPaddingTop'>
    <ion-title>Tab page title</ion-title>
  </ion-toolbar>
</ion-header>
...

我对这种方法也不是很满意，但它适用于ion-tabs..

Answer 3

一个更好的解决方案很明显：

<ion-header>
  <h2></h2>
</ion-header>

<ion-content>
  <ion-tabs tabsPlacement="top">
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  </ion-tabs>
</ion-content>

我不知道为什么我花了这么长时间才弄清楚......

Answer 4

似乎标签很难使用。我通过使用段找到了解决方法。我只需要花一些时间将它们风格化以使其看起来正确。

这是我的新 app.html 代码：

<ion-header>
  <h2></h2>
  <ion-segment [(ngModel)]="page" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="home">
      <ion-icon name="home"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="about">
      <ion-icon name="information-circle"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="contacts">
      <ion-icon name="contacts"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-header>
<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>

在标题中包含段对我有用，但为了获得我需要的填充，我必须添加一个空的 h2 标记。如果有更好的方法，请随时告诉我，目前我对此感到满意。

对于那些想做类似事情的人，我在这里找到了答案，由 rapropos 发布：

https://forum.ionicframework.com/t/having-a-hard-time-understanding-the-navigation-with-tabs/92918/9