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状态栏没有显示图标的主要内容,如果未能解决你的问题,请参考以下文章

Android仅在状态栏展开时显示通知

Ionic 3 Android 应用程序的状态栏文本颜色为深色或黑色

Android:谷歌地图位置电池使用率低

Android nougat 状态栏在启动活动时显示白色

Android 在没有可展开视图的情况下在状态栏中显示通知

Android状态栏微技巧,动态控制状态栏显示和隐藏