ionic项目中手机状态栏显示使用$cordovaStatusbar插件

在项目中发现Android和iOS在手机状态栏样式不同,而后就查到有一个cordova插件能够解决这个问题android

1.下载插件$cordovaStatusbar命令:ios

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

2.在config.xml里面配置以下:git

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

将此配置改成:
<preference name="Fullscreen" value="false"/>(不然在Android上状态栏显示不出来)

3.在app.js里面,以下:github

 

判断手机是android 仍是iOS来定义不一样的样式,个人这个是在Android和iOS上都是背景色为黑色,字体为白色apache

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

4.最后iOS结果如图:app

具体请参考ngcordova官网,http://ngcordova.com/docs/plugins/statusbar/和https://github.com/apache/cordova-plugin-statusbar上的资料
相关文章
相关标签/搜索