如何在 Ionic 应用程序中隐藏状态栏后面的栏？答案

【问题标题】：How to hide bar behind status bar in Ionic app?如何在 Ionic 应用程序中隐藏状态栏后面的栏？
【发布时间】：2017-09-27 02:54:08
【问题描述】：

我正在尝试使用 Ionic 的 cordova-plugin-statusbar 删除状态栏和我的应用内容之间的不透明栏。这似乎不是状态栏的一部分，因为即使状态栏不可见，它也是可见的。

我相信这个问题可能与缺少 <ion-header> 元素有关，但我确信。此外，我在其他非 Ionic Cordova 项目中没有遇到过这个问题。

这是我的$ ionic info：

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.2 Build version 8E2002

我尝试了以下状态栏配置：

默认

this.statusBar.styleDefault();

隐藏

this.statusBar.hide();

轻量级内容

this.statusBar.styleLightContent();

内容轻且无叠加

this.statusBar.overlaysWebView(false);
this.statusBar.styleLightContent();

【问题讨论】：

在 Xcode 中构建应用时不会出现此问题，仅在 Ionic View 应用中查看时才会出现。

标签： ios ionic-framework ionic2 statusbar ionic-view

【解决方案1】：

这似乎是Ionic View app on iOS 的一个已知问题。预览应用添加了一个半透明的 20px tall 元素，该元素无法使用 Status Bar plugin 或 CSS 删除。

记录在 Ionic View 应用的 Github issues 和 Ionic forum 中。

【讨论】：