我正在使用 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 是使用 React 编写的,没有使用 Capacitor,所以据我了解,我无法使用状态栏插件
任何指导或其他尝试的事情将不胜感激
你需要使用@capacitor/status-bar插件。文档甚至在一开始就说明了这一点:
StatusBar API 提供用于配置状态栏样式以及显示或隐藏它的方法。