Ionic project in the mobile status bar display using the $cordovastatusbar plugin

Found in the project Android and iOS in the phone status bar style is not the same, and then found that there is a Cordova plug-in can solve the problem

1. Download plugins$cordovaStatusbar命令：

cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

2. Configure the following in config:

<feature name= "StatusBar" >
  <param name= "Ios-package" onload= "true" value= "Cdvstatusbar"/>
</feature>

Change this configuration to:

<preference name= "fullscreen" value= "false"/> (otherwise the status bar on Android does not show up)

3. Inside the App.js, as follows:

Determine whether the phone is Android or iOS to define a different style, my this is on Android and iOS are background color black, the font is white

if (Cordova.platformid = = ' Android ') {
    Statusbar.backgroundcolorbyhexstring ("#333");
}else{
    $cordovaStatusbar. Overlayswebview (FALSE);
    $cordovaStatusbar. Style (1);
    Statusbar.stylelightcontent ();
    $cordovaStatusbar. Stylecolor (' black ');
}

4. Last iOS results

Please refer to Ngcordova website, http://ngcordova.com/docs/plugins/statusbar/and Https://github.com/apache/cordova-plugin-statusbar for details.

Ionic project in the mobile status bar display using the $cordovastatusbar plugin