uniapp navigationstyle 字体颜色如何设置

在uniapp中如何设置navigationBar的字体颜色？我尝试在pages.json里配置"navigationBarTextStyle": "white"但没生效，请问正确的配置方法是什么？需要区分Android和iOS吗？

2 回复

在pages.json中设置navigationBarTextStyle为black或white。也可用navigationBarTextStyle自定义样式，但需注意兼容性。


在 UniApp 中，可以通过 navigationBarTextStyle 设置导航栏标题字体颜色，但仅支持 "black"（黑色）或 "white"（白色）两种预设值。具体配置如下：

  1. 全局设置：在 pages.json 的 globalStyle 中配置：

    {
  "globalStyle": {
    "navigationBarTextStyle": "white"
  }
}

  2. 单页面设置：在 pages.json 的特定页面配置中覆盖全局设置：

    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTextStyle": "black"
      }
    }
  ]
}

注意事项：

  • 仅支持 "black" 或 "white"，不支持自定义颜色值（如十六进制颜色代码）。
  • 设置后导航栏标题、返回按钮及胶囊按钮颜色会同步改变。
  • 如需更灵活的颜色定制，可能需要结合自定义导航栏或使用 CSS 样式覆盖（例如通过 uni-nav-bar 组件）。

如果需自定义其他样式（如背景色），可通过 navigationBarBackgroundColor 设置导航栏背景色来间接影响视觉效果。

回到顶部