在离子2应用程序中更改iOS状态栏颜色

我正在关注离子2文档以设置iOS状态栏颜色，但它无法正常工作。 状态栏文本为白色，这意味着在我的白色背景上它是不可见的。

我在我的app构造函数中放入的代码是：

StatusBar.overlaysWebView(true); StatusBar.styleDefault(); 

我使用以下方法导入StatusBar：

 import {StatusBar} from 'ionic-native'; 

我还检查了cordova s​​tatusbar插件是否已安装。

Answer 1

您可以尝试在config.xml中添加此项，并使用您要设置的颜色的hex值：

对于ngCordova或离子原生，您可以使用

  $cordovaStatusbar.styleColor('black'); $cordovaStatusbar.styleHex('#000'); 

---

或者你查看statusbar cordova插件github页面有一些方法来改变状态栏的颜色： https ： //github.com/apache/cordova-plugin-statusbar

对于Android：

 if (cordova.platformId == 'android') { StatusBar.backgroundColorByHexString("#333"); } 

对于iOS

在iOS 7上，当您将StatusBar.statusBarOverlaysWebView设置为false时，可以按颜色名称设置状态栏的背景颜色。

 StatusBar.backgroundColorByName("red"); 

支持的颜色名称是：

 black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown 

要么
通过hex字符串设置状态栏的背景颜色。

 StatusBar.backgroundColorByHexString("#C0C0C0"); 

还支持CSS速记属性。

 StatusBar.backgroundColorByHexString("#333"); // => #333333 StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB On iOS 7, when you set StatusBar.statusBarOverlaysWebView to false, you can set the background color of the statusbar by a hex string (#RRGGBB). 

在WP7和WP8上，您还可以将值指定为#AARRGGBB，其中AA是alpha值

Answer 2

您需要做的就是在app.module.ts （或其他任何名称）中包含此指令。

这将在整个应用程序中动态处理状态栏文本颜色行为（无需担心何时何地设置内容）：

 import { Directive, ElementRef, OnDestroy, OnInit, Optional } from '@angular/core' import { StatusBar } from '@ionic-native/status-bar' import { Platform, ViewController } from 'ionic-angular' @Directive({ /* tslint:disable */ selector: "ion-header", /* tslint:enable */ }) export class DynamicStatusBarDirective implements OnInit, OnDestroy { public static isColorTooLight(colorString) { let rgb = DynamicStatusBarDirective.getRgbColor(colorString) if (rgb.a || (rgb.a < 0.2)) { // becoming too transparent return true } // contrast computation algorithm/approach: https://24ways.org/2010/calculating-color-contrast let yiq = ((rgb.r * 299) + (rgb.g * 587) + (rgb.b * 114)) / 1000 return yiq >= 128 } public static getRgbColor(colorString): RGB { if (!colorString) { return null } let rgb: RGB = new RGB() if (colorString[ 0 ] === '#') { // seems hex color rgb.r = parseInt(colorString.substr(0, 2), 16) rgb.g = parseInt(colorString.substr(2, 2), 16) rgb.b = parseInt(colorString.substr(4, 2), 16) } else { let matchColors = /rgba?\(((25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*?){2}(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,?\s*([01]\.?\d*?)?\)/ let colors = matchColors.exec(colorString) if (colors) { rgb.r = parseInt(colors[ 1 ], 10) rgb.g = parseInt(colors[ 2 ], 10) rgb.b = parseInt(colors[ 3 ], 10) if (colors[ 4 ]) { // has transparency rgb.a = parseInt(colors[ 4 ], 10) } } } return rgb } public static getModalParent(nativeElm) { return nativeElm .parentNode // modal .parentNode // modal wrapper .parentNode // ion-modal .parentNode // ion-app, which handles background status bar } public static getHeaderBackgroundForMobile(nativeElm) { let header = nativeElm.querySelector('.toolbar-background') return window.getComputedStyle(header).backgroundColor } public ionViewEnterCallback: Function public modalCloseCallback: Function constructor( public platform: Platform, public statusBar: StatusBar, public elm: ElementRef, @Optional() public viewCtrl: ViewController, ) { } public ngOnInit(): void { this.ionViewEnterCallback = () => this.checkStatusBar() if (this.viewCtrl) { this.viewCtrl.willEnter.subscribe(this.ionViewEnterCallback) } } public ngOnDestroy(): void { this.viewCtrl.willEnter.unsubscribe() this.viewCtrl.didLeave.unsubscribe() } public checkStatusBar(): void { if (!this.platform.is('ios')) { return } let nativeElm = this.elm.nativeElement if (this.viewCtrl.isOverlay) { // dealing with modal let parentNativeElm = DynamicStatusBarDirective.getModalParent(nativeElm) if (parentNativeElm) { // modal is open this.modalCloseCallback = () => this.setColor(window.getComputedStyle(parentNativeElm).backgroundColor) this.viewCtrl.didLeave.subscribe(this.modalCloseCallback) } if (this.platform.is('tablet')) { this.setColor(true) // for modals we are getting grey overlay, so need to set white background return } } let background = DynamicStatusBarDirective.getHeaderBackgroundForMobile(nativeElm) if (background) { this.setColor(background) } } public setColor(background: any): void { let isTooLight = DynamicStatusBarDirective.isColorTooLight(background) if (isTooLight) { this.statusBar.styleDefault() } else { this.statusBar.styleBlackTranslucent() } } } class RGB { r: number g: number b: number a?: number }