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

安装

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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容