Ionic/Cordova 更改 Android 导航栏颜色

Question

我正在尝试更改 Android 中导航栏的颜色（在底部，带有返回键和主页键）- 在没有硬件主页键和返回键的手机上。在我使用 Cordova 的 Ionic 应用程序中。

有办法吗？

示例：

Answer 1

我在我的 sass 文件 theme/variable.scss 文件

中做了类似的事情

$toolbar-background: #009241;

基于this

Answer 2

您可以在所需页面中使用以下样式，将其添加到相应的 scss 文件中，并根据您的要求 android 使用此

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

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

对于 ios 使用相同的方法，但使用 ios 标签代替 md，如下所示

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

Answer 3

@Amitairos android 导航栏也叫状态栏。 IONIC native 对此有一个插件。看看这个 link https://ionicframework.com/docs/native/status-bar/.

例如：- this.statusBar.styleBlackTranslucent(); 这会将您的状态栏颜色更改为黑色。您也可以使用任何颜色代码，请在上方查看 link。这一定会对你有帮助。

Answer 4

找到了这个很棒的 cordova 插件，它做得很漂亮：
https://www.npmjs.com/package/ionic-plugin-navigation-bar-color

Answer 5

使用@ionic/angular 5.6.0 测试工作的 cordova 插件： 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);

导航栏白底黑色按钮（导航栏内按钮）：

Ionic/Cordova 更改 Android 导航栏颜色

Ionic/Cordova Change Android Navigation Bar color

android

cordova

ionic-framework

cordova-plugins