node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0
安装
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>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
所有方法
- StatusBar.overlaysWebView
- StatusBar.styleDefault
- StatusBar.styleLightContent
- StatusBar.styleBlackTranslucent
- StatusBar.styleBlackOpaque
- StatusBar.backgroundColorByName
- StatusBar.backgroundColorByHexString
- StatusBar.hide
- StatusBar.show
