Ionic 4 Android应用程序,无法更改状态栏的背景颜色

时间:2019-05-13 00:30:24

标签: android ionic-framework ionic4

我正在构建一个ionic 4应用程序,当在android上运行时,状态栏为黑色,我想对其进行更改,但我无法弄清楚。

我试图更改config.xml中的首选项,OverlayWebView是非,并尝试仅使用this.statusBar.backroundcolor ...东西。什么都没有。 statusBar插件已安装。

Config.xml:    
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarOverlaysWebView" value="true" />


App.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
  })
 export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
     this.initializeApp();
  }


  initializeApp() {
  this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
  this.statusBar.overlaysWebView(true);
  this.statusBar.backgroundColorByHexString('#ffffff');
    });
   }
 }

我想更改状态栏的颜色,该状态栏显示时间,电池电量等,但是无论我做什么,它都保持黑色。

1 个答案:

答案 0 :(得分:0)

我现在设法更改颜色,但是必须在Android Studio中使用android:statusBarColor进行更改。仍然会感激离子型的方法。

 <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:background">@null</item>
    <item name="android:statusBarColor">@color/colorPrimary</item>
 </style>


 <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item>
    <item name="android:statusBarColor">@color/colorPrimary</item>
 </style>
</resources>