科尔多瓦(Cordova)隐藏状态栏

问题描述

限时删除！！

我正在使用Phonegap和Framework7构建iPad的应用程序，无论我做什么，似乎都无法将状态栏隐藏在iPad上.

I'm building an application for iPad with Phonegap and Framework7 and I can't seem to get the status bar to be hidden on the iPad no matter what I do.

我尝试过搜索一些教程，其中包括以下问题:

I've tried to google out a few tutorials, including the following questions:

• 如何使用Phonegap Build删除iOS状态栏?
• 如何完全隐藏状态栏在iOS中使用Cordova吗?
• > Cordova/Phonegap会忽略配置中的全屏首选项. iOS上的xml

• How to remove iOS status bar with Phonegap Build?
• How to completely hide the status bar in iOS using Cordova?
• Cordova/Phonegap ignores fullscreen preference in config.xml on iOS

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

I've tried the solutions provided in all the answers of the questions above and my status bar is still there.

我已经使用xCode打开了项目，并且可以看到设置配置得很好:

I've opened the project with xCode and I can see that the settings are configured fine:

对于部署信息中的i​​Phone设置:

For the iPhone settings in deployment info:

• 状态栏样式:默认
• 隐藏状态栏(已选中)
• 需要全屏(选中)

有关部署信息中的i​​Pad设置:

For the iPad settings in deployment info:

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

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

In the Info > Custom iOS Target Properties, I have set the following:

• 基于控制器的状态栏外观:否

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

I've also tried to use the JavaScript way when the deviceready event has been fired:

StatusBar.hide();

更新

当我跑步时:

Update

When I run:

StatusBar.isVisible

该属性返回false，但是我仍然在顶部看到白色栏.

The property returns false, however I still see the white bar at the top.

推荐答案

经过长时间的调试，我终于弄清了问题所在.

After some long hours of debugging, I finally figured out what the issue was.

实际上，状态栏是隐藏的，白色栏是Framework7提供的叠加层，它解释了以下内容:

In fact, the status bar was hidden, and the white bar we would see is the overlay provided by Framework7, which explains the following:

StatusBar.isVisible // false

很明显，Framework7隐藏了状态栏，但是在应用程序顶部保留了一个空白的白条，即填充.

Apparently Framework7 is hiding the status bar, but leaving a blank white bar on top of the application, which is a padding.

因此，要删除该栏，我必须从html标记中删除类with-statusbar-overlay.为此，我在JavaScript文件中添加了以下内容:

So to remove the bar, I had to remove the class with-statusbar-overlay from the html tag. And to do so, I added the following to my Javascript file:

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

请注意，必须在deviceready事件之前执行Javascript修复程序.否则，您将看到带有条形图的主视图，然后条形图将消失.如果您将它放在活动之前，则用户将永远看不到该栏.

Note that the Javascript fix must be executed before the deviceready event. Otherwise, you will see the home view with the bar, then the bar will disappear. If you put it before the event, the user will never see the bar.

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

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

这篇关于科尔多瓦(Cordova)隐藏状态栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..