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

Question

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

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

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

我使用以下方法导入了StatusBar：

 import {StatusBar} from 'ionic-native'; 

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

Answer 1

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

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

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

  $cordovaStatusbar.styleColor('black');

  $cordovaStatusbar.styleHex('#000');

---

或者你检查状态栏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

要么
通过十六进制字符串设置状态栏的背景颜色。

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
}