如何更改状态栏颜色 ionic 3 app答案

【问题标题】：How to change status bar color ionic 3 app如何更改状态栏颜色 ionic 3 app
【发布时间】：2018-06-16 08:57:22
【问题描述】：

我一直在尝试使用以下方法更改 Ionic App 中的状态栏颜色：

 import { StatusBar } from '@ionic-native/status-bar';

 constructor(private statusBar: StatusBar) { }

 this.statusBar.overlaysWebView(true);

 this.statusBar.backgroundColorByHexString('#ffffff');

但状态栏颜色仍然没有改变。

【问题讨论】：

标签： ionic-framework

【解决方案1】：

经过几天的搜索终于找到了解决方案。先安装

ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar

然后将以下内容添加到 config.xml

<preference name="StatusBarBackgroundColor" value="#2873ed" />
<preference name="StatusBarOverlaysWebView" value="true" />

【讨论】：

【解决方案2】：

安装

安装 Cordova 和 Ionic Native 插件：

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

用法

import { StatusBar } from '@ionic-native/status-bar';

constructor(private statusBar: StatusBar) { }

...

// let status bar overlay webview
this.statusBar.overlaysWebView(true);

// set status bar to white
this.statusBar.backgroundColorByHexString('#ffffff');

查看ionic 3状态栏

【讨论】：