ionic項目中手機狀態欄顯示使用$cordovaStatusbar插件

在項目中發現Android和iOS在手機狀態欄樣式不同，而後就查到有一個cordova插件能夠解決這個問題

1.下載插件$cordovaStatusbar命令：

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

2.在config.xml裏面配置以下：

<feature name="StatusBar">
  <param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>

將此配置改成：

<preference name="Fullscreen" value="false"/>（不然在Android上狀態欄顯示不出來）

3.在app.js裏面，以下：

 

判斷手機是android 仍是iOS來定義不一樣的樣式，個人這個是在Android和iOS上都是背景色爲黑色，字體爲白色

if (cordova.platformId == 'android') {
    StatusBar.backgroundColorByHexString("#333");
}else{
    $cordovaStatusbar.overlaysWebView(false);
    $cordovaStatusbar.style(1);
    StatusBar.styleLightContent();
    $cordovaStatusbar.styleColor('black');
}

4.最後iOS結果如圖：

具體請參考ngcordova官網，http://ngcordova.com/docs/plugins/statusbar/和https://github.com/apache/cordova-plugin-statusbar上的資料