Cordova 隐藏状态栏

Question

我正在使用 Phonegap 和 Framework7 为 iPad 构建一个应用程序，但无论我做什么，我似乎都无法在 iPad 上隐藏状态栏。

我已经尝试 google 出一些教程，包括以下问题：

• How to remove iOS status bar with Phonegap Build?
• How to completely hide the status bar in iOS using Cordova?

我已经尝试了上面所有问题的答案中提供的解决方案，我的状态栏仍然存在。

我用 xCode 打开了项目，我可以看到设置配置正确：

对于部署信息中的 iPhone 设置：

• 状态栏样式：默认
• 隐藏状态栏（选中）
• 需要全屏（选中）

对于部署信息中的 iPad 设置：

• 在应用程序启动期间隐藏（选中）
• 需要全屏（选中）

在 Info > Custom iOS Target Properties 中，我设置了以下内容：

• 查看基于控制器的状态栏外观：否

当 deviceready 事件被触发时，我也尝试使用 JavaScript 方式：

StatusBar.hide();

更新

当我运行:

StatusBar.isVisible

属性 returns 错误，但我仍然看到顶部的白色条。

Answer 1

经过几个小时的调试，我终于弄清楚了问题所在。

其实状态栏是隐藏的，我们看到的白条是Framework7提供的overlay，解释如下：

StatusBar.isVisible // false

显然 Framework7 隐藏了状态栏，但在应用程序顶部留下了一个空白的白色栏，这是一个填充。

所以要删除栏，我必须从 html 标签中删除 class with-statusbar-overlay。为此，我将以下内容添加到我的 Javascript 文件中：

document.documentElement.classList.remove('with-statusbar-overlay');

请注意，Javascript 修复必须在 deviceready 事件之前执行。否则，您将看到带栏的主视图，然后栏将消失。如果放在事件之前，用户将永远不会看到该栏。

document.documentElement.classList.remove('with-statusbar-overlay');

Dom7(document).on('deviceready', function(){
    // Your code
});