How to remove iOS status bar with Phonegap Build?

问题:

Is it possible to get rid of the status bar in iOS7 when using Phonegap Build 3.1? I can remove the status bar when building locally in Xcode, but as soon as I try Phonegap Build, it's back again.

1. Is there a config preference to remove the status bar completely?
2. If not, is it possible to overlay the status bar on top of the app view and set it to a transparent background?

I do not want the status bar to push down the app view 20px, which is the case now.

回答1:

As of Phonegap 3 you can now customize plist files via config.xml.

Code:

<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true">
    <false/>
</gap:config-file>

回答2:

Usually, you would edit the info.plist and add this key:

 <key>UIViewControllerBasedStatusBarAppearance</key><false/>

But as you can't do this on build, you'll have to add a plugin:

https://github.com/phonegap-build/StatusBarPlugin/blob/master/README.md

And then:

StatusBar.hide();

回答3:

Add this function into MainViewController.m file:

//fix not hide status on ios7
- (BOOL)prefersStatusBarHidden
{
    return YES;
}

回答4:

click on the "projectname-Info.plist" file under the XCode root project folder , you will be shown with an UI where you can see key vs values entries ,you can add/delete keys, add a new key just look for "Status bar is initially hidden" and set "YES" as the value.

回答5:

I'm using the following in config.xml which completely removes the status bar, tested on iOS 7.0.3 & 7.0.4, Phonegap version 3.0.0 if that helps.

    <preference name="fullscreen" value="true" />

回答6:

Simply install the status bar plugin (I'm using Cordova 5.x):

cordova plugin add cordova-plugin-statusbar@1.0.1

The in your code just reference its global variable and use .hide():

StatusBar.hide()

回答7:

With Cordova, I had to do actually 2 things.

1. When I build with XCode I set in Target->Statusbar style to -> HIDDEN this would hide statusbar at startup on your splash screen.

2. You have to hide it also on device ready with plugin. Otherwise, it will reappear. To do that, install plugin:

cordova plugin add org.apache.cordova.statusbar

and call this on deviceready:

StatusBar.hide();

回答8:

This worked for me:

<preference name="fullscreen" value="true" />

I'm working on Android.

回答9:

I've answered this for removing the Status bar altogether in your previous question

The essential part:

I got this to work beautifully in Cordova 3.6 + iOS 7.1. And considering that iOS 7 and 8 each have 50% of market share this solution should be enough.

Plugin I'm using: org.apache.cordova.statusbar

Instead of using StatusBar.hide() I used:

var hideSb = function(){
//        StatusBar.hide;
        cordova.exec(null, null, 'StatusBar', 'hide', ['Ehi', 'You']);
    };