将 Ionic 3 应用的 iOS 状态栏字体颜色更改为白色答案

【问题标题】：Change iOS status bar font color to white for Ionic 3 app将 Ionic 3 应用的 iOS 状态栏字体颜色更改为白色
【发布时间】：2018-04-30 10:54:11
【问题描述】：

我的 config.xml

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightcontent" />

我的 app.component

import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleLightContent();
      splashScreen.hide();
    });
  }

没用。

【问题讨论】：

标签： ios ionic-framework ionic2 ionic3

【解决方案1】：

在我的例子中，我需要在 IOS 中更改状态栏背景颜色和内容颜色。

首先我需要安装插件。

ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar@4 // version 4 since ionic 3

然后在 app.comopenet.ts 中

  constructor(statusBar: StatusBar, platform: Platform) {
      platform.ready().then(() => {

          statusBar.overlaysWebView(false);
          // overlaysWebView must set to false if you change the background color in iOS with ionic (hence I am using backgroundColorByHexString method )

          statusBar.backgroundColorByHexString('#c8102e');
          // used above hex color code to set the status bar background color 

          statusBar.styleLightContent();
          // above function  will change the status bar content (icon , text)

          statusBar.show();
          // finally shows the status bar
      });
  }

我终于得到了我需要的东西

【讨论】：

【解决方案2】：

如果您没有用于状态栏的 ng-cordova 插件。然后你可以这样做 -

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

【讨论】：

这个 ionic 1 和 styleDefault() 的代码对我不起作用

【解决方案3】：

也许你可以在你的 platform.ready().then(() => 方法中试试这个

 StatusBar.overlaysWebView(false);
 StatusBar.backgroundColorByHexString('#00FFFF');

【讨论】：

【解决方案4】：

我找到了解决方案。它对我有用

  statusBar.overlaysWebView(true);
  statusBar.backgroundColorByHexString('#1f2933');

【讨论】：

【解决方案5】：

this.statusBar.backgroundColorByHexString('transparent');

【讨论】：