如何在我的 Ionic 应用程序中将顶部栏文本颜色更改为白色？

Question

我使用以下方法将 header 更改为更深的颜色：

<ion-nav-bar class="bar-royal">

当我在 ios 上运行时，顶部的状态栏文本（时间、运营商、电池等）是黑色的，在深色背景上很难看清。如何将此文本设为白色？

Answer 1

使用插件 statusbar 和 ngCordova 非常简单：

var app = angular.module('ionicApp', ['ionic', 'ngCordova']);

app.run(function($cordovaStatusbar) {
  $cordovaStatusbar.overlaysWebView(true);

  $cordovaStatusBar.style(1); //Light
  $cordovaStatusBar.style(2); //Black, transulcent
  $cordovaStatusBar.style(3); //Black, opaque
});

在此处查看完整文章： http://learn.ionicframework.com/formulas/customizing-the-status-bar/

更新 - 没有 ngCordova：

默认的 Ionic 项目安装了状态栏插件。如果你内心有这个声明运行可能你的项目已经有：

if(window.StatusBar) {
  StatusBar.styleDefault();
}

所以代码变成：

var app = angular.module('ionicApp', ['ionic']);

app.run(function() {
    if(window.StatusBar) {
      StatusBar.overlaysWebView(true);
      StatusBar.style(1); //Light
      StatusBar.style(2); //Black, transulcent
      StatusBar.style(3); //Black, opaque
    }
});

更新二

在 cordova-plugin-statusbar 的新版本 2.x 中，StatusBar.style() 方法被这些新方法取代：

StatusBar.styleLightContent();
StatusBar.styleBlackTranslucent();
StatusBar.styleBlackOpaque();

Check the plugin's documentation

Answer 2

在带有 angular 应用程序的 ionic 4 中，我们可以通过以下代码更改状态栏颜色及其文本颜色 how to change status bar's text color

this.platform.ready().then(() => {
  this.splashScreen.hide();
  this.statusBar.overlaysWebView(true);
  this.statusBar.styleDefault();
});

如何在我的 Ionic 应用程序中将顶部栏文本颜色更改为白色？

How do I change the top bar text color to white in my Ionic App?

ionic-framework

ionic