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

[JavaScript]View PlainCopy

1. if (Cordova.platformid = = ' Android ') {
2. Statusbar.backgroundcolorbyhexstring ("#333");
3. }else{
4. $cordovaStatusbar. Overlayswebview (false);
5. $cordovaStatusbar. Style (1);
6. Statusbar.stylelightcontent ();
7. $cordovaStatusbar. Stylecolor (' black ');
8. }

4. Last iOS results

Ionic items in the phone status bar display using the $cordovastatusbar plugin