当我更新我的项目离子版本时,Android应用程序的状态栏在进入应用程序时无法显示任何图标:
进入app:
任何人都知道如何解决? 我的信息:
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.17.0
ionic (Ionic CLI) : 3.17.0
全球套餐:
cordova (Cordova CLI) : 7.1.0
本地包裹:
@ionic/app-scripts : 3.0.1
Cordova Platforms : android 6.3.0 ios 4.6.0-nightly.2017.11.22.24bfb734
Ionic Framework : ionic-angular 3.8.0
系统:
ios-deploy : 1.9.2
ios-sim : 5.0.13
Node : v7.10.0
npm : 5.5.1
OS : macOS Sierra
Xcode : Xcode 9.0.1 Build version 9A1004
环境变量:
ANDROID_HOME : not set
其他:
backend : legacy
答案 0 :(得分:9)
import { StatusBar } from '@ionic-native/status-bar';
import { Platform } from 'ionic-angular';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(public platform: Platform, public statusBar: StatusBar) {
platform.ready().then(() => {
statusBar.styleDefault();
if (platform.is('android')) {
statusBar.overlaysWebView(false);
statusBar.backgroundColorByHexString('#000000');
}
});
}
}
这解决了我的问题。
答案 1 :(得分:8)
我已经解决了
statusBar.styleBlackOpaque();
而不是
statusBar.styleDefault();
答案 2 :(得分:1)
我发现这很有帮助。您可以在ionic 3中使用这三个选项之一
import { StatusBar } from '@ionic-native/status-bar';
import { Platform } from 'ionic-angular';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(public platform: Platform, public statusBar: StatusBar) {
this.platform.ready().then(() => {
// for Black
if(this.platform.is('android')) {
this.statusBar.styleBlackOpaque();
}
}
}
}
您也可以使用一个用于十六进制代码颜色
this.statusBar.backgroundColorByHexString('#fff');
这是一个内置的浅色主题。
this.statusBar.styleLightContent();
答案 3 :(得分:0)
检查你有
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
...
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
为了安全起见,请运行以下命令。
$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install --save @ionic-native/status-bar
完成所有这些后。使用您最喜欢的命令生成您的Apk,或者您也可以尝试这个
$ ionic cordova run android --device
答案 4 :(得分:0)
在statusBar.styleDefault()
处将statusBar.styleLightContent()
更改为app.component.ts
。
答案 5 :(得分:0)
在插件下方安装:
在app.component.ts中包含以下代码
if (this.platform.is('android')) {
this.statusBar.backgroundColorByHexString(<<STATUS_BAR_COLOR>>);
}
import { Component } from "@angular/core";
import { Platform } from "@ionic/angular";
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
import { StatusBar } from "@ionic-native/status-bar/ngx";
import { TranslateService } from "@ngx-translate/core";
import { EventProvider } from "./event-provider.service";
@Component({
selector: "app-root",
templateUrl: "app.component.html"
})
export class AppComponent {
constructor(
private translate: TranslateService,
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private eventProvider: EventProvider
) {
this.initializeApp();
this.eventProvider.currentLang.subscribe(lang => {
this.translate.use(lang);
});
if (this.platform.is('android')) {
this.statusBar.backgroundColorByHexString('#04b9fe');
}
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
答案 6 :(得分:0)
在 Ionic 4 应用程序中显示状态栏
import { StatusBar } from '@ionic-native/status-bar/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(
private platform: Platform,
private statusBar: StatusBar,
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.show();
}
}
}