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

Question

我试图在我的应用程序顶部创建一个标签栏，没有明显的标题，但iOS状态栏与它重叠。我试过将ion-tabs标签包裹在具有填充物但不起作用的ion-content标签中。我将选项卡包裹在标题中以解决填充问题，但是选项卡加载的页面消失在标题内。

我已经看到所有关于标题的帖子都是重叠的，但是这些是几年前的，在第4章中已得到修复，并且该解决方案无论如何都不适用于选项卡。

如何在不删除状态栏的情况下解决此问题？

iOS版本：11.4.1

离子版本：4.0.5

重新创建：

• 创建离子标签启动程序项目
• 将标签的位置更改为顶部

• 删除home.html中的标题

  title  | icon           | animal |
  1      | <deleteIcon/>  | cat    |
  2      | <deleteIcon/>  | dog    |
  3      | <deleeteIcon/> | bird   |
  

Answer 1

标签似乎很难使用。我发现使用分段可以解决问题。我只需要花一些时间来对它们进行样式化以使其看起来正确。

这是我的新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

Answer 2

一个更好的解决方案是显而易见的：

<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 3

只需稍加努力，您就可以继续使用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 4

在阅读并使用@Bilow's answer之后，我发现仅向整个ion-tabs元素添加边距就足够了，就像这样：

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

这为iOS上的状态栏添加了空间。在已经正常运行的Android上，没有任何更改，因此此修复程序可跨平台运行。