在離子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
}