带有半透明标题的 Ionic iOS PWA 状态栏

Question

我正在使用 ionic 框架开发一个 PWA。 它看起来就像一个 iOS 应用程序，除了我不明白的一件事，那就是状态栏。 在离子组件文档中，示例显示标题的背景与状态栏的背景相匹配，这正是我想要实现的目标，但对我来说，状态栏始终为纯黑色（在浅色模式下），在深色模式下为白色。 我尝试实现可折叠标题，它提供了漂亮的半透明背景效果，但我无法使状态栏匹配。 我尝试添加额外的元标签，例如

<meta name="viewport" content="viewport-fit=cover"></meta>

或

<meta name="apple-mobile-web-app-status-bar-style" content="default" />

这没有任何区别，但鉴于我的清单文件已将显示设置为独立，因此不需要它们。

我已经能够使用清单中的 theme_color 属性更改颜色，但这是一个设置颜色，与标题的半透明行为不匹配。

这是如何显示为 PWA 的示例

这就是它在浏览器中的显示方式

PWA 是使用 React 编写的，没有使用 Capacitor，所以据我了解，我无法使用状态栏插件

任何指导或其他尝试的事情将不胜感激

Answer 1

你需要使用@capacitor/status-bar插件。文档甚至在一开始就说明了这一点：

StatusBar API 提供用于配置状态栏样式以及显示或隐藏它的方法。