Cordova各個插件使用介紹系列（七）—$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上的資料