ionic3 android状态栏没有显示图标
Posted
技术标签:
【中文标题】ionic3 android状态栏没有显示图标【英文标题】:ionic3 android status bar no icon shown 【发布时间】:2018-05-08 07:18:06 【问题描述】:当我更新我的项目 ionic 版本时,android 应用的状态栏在进入应用时无法显示任何图标:
进入应用时:
有人知道怎么解决吗? 我的信息:
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
【问题讨论】:
这方面有什么更新吗?我有同样的问题:( 【参考方案1】:我已经解决了
statusBar.styleBlackOpaque();
而不是
statusBar.styleDefault();
【讨论】:
Ionic v4 也为我工作【参考方案2】:import StatusBar from '@ionic-native/status-bar/ngx';
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');
);
这解决了我的问题。
【讨论】:
与我合作,但只导入import StatusBar from '@ionic-native/status-bar/ngx';
为我工作 ionic5。我只需要statusBar.overlaysWebView(false);
【参考方案3】:
我发现这很有帮助。您可以在 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();
【讨论】:
【参考方案4】:在你的 app.component.ts 检查你有没有
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
【讨论】:
【参考方案5】:在app.component.ts
处将statusBar.styleDefault()
更改为statusBar.styleLightContent()
。
【讨论】:
【参考方案6】:安装以下插件:
ionic cordova 插件添加cordova-plugin-statusbar npm install @ionic-native/status-bar在您的 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();
);
【讨论】:
【参考方案7】:在 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();
【讨论】:
以上是关于ionic3 android状态栏没有显示图标的主要内容,如果未能解决你的问题,请参考以下文章