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上的資料

ionic項目中手機狀態列顯示使用$cordovaStatusbar外掛程式