Question

我无法更改应用底部导航栏的颜色。当我将我的应用程序主题更改为深色时，底部导航栏的主题（其中存在概览、主页和后退按钮）保持浅色，即背景仍然是白色，带有黑色图标。如何在 ionic 中设置底部导航栏的样式？这是我更改应用主题的 changeTheme() 方法代码：

changeTheme() {
    this.darkTheme = !this.darkTheme;
    if (this.darkTheme) {
      // Change app theme
      document.body.setAttribute('theme-color', 'dark');
      // Change StatusBar theme
      StatusBar.setBackgroundColor({ color: 'black' });
      StatusBar.setStyle({style: StatusBarStyle.Dark});
      // How to change Bottom Navigation Bar theme?
    } else {
      // Change app theme
      document.body.setAttribute('theme-color', 'light');
      // Change StatusBar theme
      StatusBar.setBackgroundColor({ color: 'white' });
      StatusBar.setStyle({style: StatusBarStyle.Light});
      // How to change Bottom Navigation Bar theme?
    }
  }

我知道有人问过这个问题here。但是该解决方案在 ionic 的最新版本中不起作用。

Answer 1

@SnowBases 在 here 上给出的原始答案

步骤：

使用 user_names = list(set(User.objects.all().values_list('username', flat=True))) 安装 cordova-plugin-navigationbar-color 插件
记得在npm i cordova-plugin-navigationbar-color之后实现这个插件
实施：

platform.ready()

为了解决错误，changeTheme() { // StatusBar.setOverlaysWebView({overlay: true}); this.darkTheme = !this.darkTheme; if (this.darkTheme) { // Change app theme document.body.setAttribute('theme-color', 'dark'); // Change StatusBar theme StatusBar.setBackgroundColor({ color: 'black' }); StatusBar.setStyle({ style: StatusBarStyle.Dark }); // Change NavigationBar theme NavigationBar.backgroundColorByName('black', false); } else { // Change app theme document.body.setAttribute('theme-color', 'light'); // Change StatusBar theme StatusBar.setBackgroundColor({ color: 'white' }); StatusBar.setStyle({ style: StatusBarStyle.Light }); // Change NavigationBar theme NavigationBar.backgroundColorByName('white', true); } } 将 NavigationBar 声明为类外的全局属性，如下所示：

Cannot find name 'NavigationBar'

在 ionic 5 中更改底部导航栏颜色

1 个答案: