cordova-plugin-statusbar-状态栏

cordova-plugin-statusbar-状态栏

node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0

欢迎访问我的专栏：
ionic4 混合开发实战-csdn
ionic4 混合开发实战-简书

安装

ionic cordova plugin add cordova-plugin-statusbar
npm install @ionic-native/status-bar

配置

一般来说，无需设置。
config.xml

// 相当于设置全屏
<preference name="StatusBarOverlaysWebView" value="true" />
// 背景
<preference name="StatusBarBackgroundColor" value="#000000" />
// ios 白色字
<preference name="StatusBarStyle" value="lightcontent" />
// 默认false
<preference name="StatusBarDefaultScrollToTop" value="false" />

使用

app.module.ts

import {StatusBar} from '@ionic-native/status-bar/ngx';
providers: [
	StatusBar
]

app.component.ts

import {StatusBar} from '@ionic-native/status-bar/ngx';
constructor(private platform: Platform,
              private statusBar: StatusBar) {
    this.initializeApp();
  }
initializeApp() {
    this.platform.ready().then(() => {
      this.initStatusBar();
    });
  }
initStatusBar() {
	this.statusBar.styleDefault();
    if (this.platform.is('android')) {
      this.statusBar.overlaysWebView(true);
    }
}

Android

设置背景色，注意#AARRGGBB AA代表透明通道

StatusBar.backgroundColorByHexString("#33000000");

IOS

启动时隐藏
编辑plist文件

<key>UIStatusBarHiddenkey>
<true/>
<key>UIViewControllerBasedStatusBarAppearancekey>
<false/>

所有方法

• StatusBar.overlaysWebView
• StatusBar.styleDefault
• StatusBar.styleLightContent
• StatusBar.styleBlackTranslucent
• StatusBar.styleBlackOpaque
• StatusBar.backgroundColorByName
• StatusBar.backgroundColorByHexString
• StatusBar.hide
• StatusBar.show