iPhone上的离子如何设置状态栏透明

Posted 2023-04-18

【中文标题】iPhone上的离子如何设置状态栏透明

【英文标题】：Ionic on iPhone How to Set StatusBar Transparent

【发布时间】：2017-01-12 23:37:28

【问题描述】：

您好，我正在创建一个基于 ionic 的应用。

我想像这样设置我的 StatusBar 透明

但是我尝试过任何代码，它总是这样

这是我的app.js 设置

    if (window.StatusBar) 
        StatusBar.overlaysWebView(true);
        StatusBar.styleLightContent();
    

我怎样才能让它像第一张照片一样正确？

【问题讨论】：

你解决了吗？

@dwinnbrown 还没有。你陷入同样的​​尴尬吗？请帮忙！尽管代码是正确的，但该应用程序显示为第二张图片。状态栏的背景不是我想要的。

我发现这只是 Ionic 查看器应用程序的一个错误。当我实际在我的设备上运行它时，它并没有这样做

@dwinnbrown 谢谢兄弟，我猜是这样！因为相同的设置在 Simulator 和 Ionic Viewer 之间得到不同的结果。模拟器的结果是正确的，但是当您看到第二张图片时，Ionic Viewer 应用程序被白色覆盖。

是的，我确实发现了这一点，经过更多研究后发现其他人也遇到了这个问题。我确实向 ionic viewer 应用程序的开发人员提出了这个问题，并且他们确实做出了回应，所以他们现在应该意识到这一点。我暂时忽略了它，知道在模拟器或设备上运行时它运行良好。

【参考方案1】：

我认为你需要明确设置背景颜色，像这样

if (window.StatusBar) 
    StatusBar.overlaysWebView(true);
    StatusBar.styleLightContent();
    StatusBar.backgroundColorByHexString('#14c1f3');

另见http://ionicframework.com/docs/v2/native/status-bar/

【讨论】：

我以这种方式更改了我的代码，但它仍然看起来像第二张图片。这是关于 Ionic View App 的问题不是我自己的吗？还是只是设置错误？ Q_Q

记得在常规 Xcode 项目中遇到过类似问题。将那里的状态栏样式设置为默认值。但在我的情况下，我在导航栏中使用了深色文本，因此可能无法解决您的问题。

在这里发现了类似的问题，forum.ionicframework.com/t/…。解决方案是将 StatusBar.overlaysWebView 设置为 false。现在没有合适的开发环境，因此无法为您测试。