如何更改状态栏颜色离子3应用程序

Question

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

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

 constructor(private statusBar: StatusBar) { }

 this.statusBar.overlaysWebView(true);

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

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

Answer 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" />

Answer 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状态栏