Ionic/Cordova更改Android导航栏颜色

发现了这个很棒的cordova插件,它做得很好:
https://www.npmjs.com/package/ionic-plugin-navigation-bar-color

.toolbar-background-md{
    background-color: 'your color code here';
  }

如果你想在整个应用程序中保持相同,请将其放入 variable.scss

对于ios,使用相同的方法,但不使用md,而是使用ios标记,如下所示

.toolbar-background-ios{
     background-color: 'your color code here';
 }

https://github.com/fagundes/cordova-plugin-navigationbar

Ionic:

   Ionic CLI                     : 6.11.10 (C:\Users\admin\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 24 other plugins)

第一个方法(声明一个全局变量)

declare const NavigationBar: any;

NavigationBar.backgroundColorByHexString("#FFFFFF", true);

或使用2种方法:

window.NavigationBar.backgroundColorByHexString("#FFFFFF", true);

导航栏为白色背景&黑色按钮(内部导航栏按钮):

我在我的sass文件中做了类似的事情 theme/variable.scss 文件

$toolbar-background: #009241;

this

@Amitairos android导航栏也称为状态栏。IONIC native为此提供了一个插件。在这个链接上查看它 https://ionicframework.com/docs/native/status-bar/ .

例如:- this.statusBar.styleBlackTranslucent(); 这会将状态栏颜色更改为黑色。您也可以使用任何颜色代码,请查看以上链接。这肯定会对你有帮助。