iOS Phonegap中的白色状态栏？

Posted 2023-04-18

【中文标题】iOS Phonegap中的白色状态栏？

【英文标题】：White status bar in iOS Phonegap?

【发布时间】：2013-12-02 10:52:36

【问题描述】：

如何在 ios7 的 Phonegap 3.1.0 中用白色文本使顶部状态栏半透明？

应用在移动 Safari 中看起来不错，但是当我尝试在 Phonegap 中运行它时，顶部栏中的文本仅在应用加载时为白色，之后无论我在项目配置中设置什么设置都是黑色。

现在在网页中有 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 和 XCode 中的 'Status Bar Style' = 'Black Translucent'... 没有帮助。

请帮忙！

【参考方案1】：

您可以在没有任何元标记或在 XCode 中编辑任何内容的情况下执行此操作。

首先，通过 CLI 安装状态栏插件：

cordova plugin add cordova-plugin-statusbar

然后您可以使用这些首选项来设置状态栏的样式（在 config.xml 中）：

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightcontent" />

这将在 iOS 7 中为您提供一个带有白色文本的透明条。如需其他选项，请查看http://plugins.cordova.io/#/package/org.apache.cordova.statusbar

【讨论】：

这应该是推荐的答案，因为它更易于维护。

所有插件都重命名了，所以现在应该是cordova plugin add cordova-plugin-statusbar。

blacktranslucent 对我不起作用，但 default 对我起作用并且状态栏变成黑色半透明

【参考方案2】：

终于找到了解决办法。

确保您具备以下条件： 在您的 index.html 有以下元标记：

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在 Xcode 中，打开 [YourPrjectName].plist 并添加以下行：

“状态栏样式”=“透明黑色样式（alpha of 0.5）”AND "查看基于控制器的状态栏外观" = "NO"

没有第二行将不起作用（实际上，这就是我的问题）。

【讨论】：

很遗憾，对我不起作用——状态栏仍然是透明的，带有黑色文本

是的，解决了在 iOS 7 中完美显示状态栏后的白色状态栏问题：***.com/a/18886468/706751

我实际上不得不使用 Xcode 更改 MainViewController.xib 文件中的设置 - 第 4 个 tabicon（看起来像滑块的那个，在标尺的右侧）有像 Size 这样的选项，方向，状态栏，顶部栏等 - 在这些下方，在色调颜色选项的正上方，是背景 - 将其更改为黑色！ :)

【参考方案3】：

如果你使用phonegap build，你可以调用

StatusBar.styleLightContent();

https://github.com/phonegap-build/StatusBarPlugin

【参考方案4】：

看看下面的链接，希望对你有帮助。

http://devgirl.org/2014/07/31/phonegap-developers-guid/

【讨论】：

Chrome 说该网站包含恶意软件

【参考方案5】：

可能为时已晚，但有相同问题的其他人可以通过安装以下插件来解决此问题。

cordova plugin add cordova-plugin-disable-ios11-statusbar --save

然后构建并运行应用程序，问题将得到解决

【参考方案6】：

添加这个

function onDeviceReady() 
  if (parseFloat(window.device.version) === 7.0) 
      document.body.style.marginTop = "20px";
   
 

document.addEventListener('deviceready', onDeviceReady, false);

iOS7 状态栏问题

http://coenraets.org/blog/2013/09/phonegap-and-cordova-with-ios-7/

【讨论】：

谢谢，但这不是我想要实现的。我希望顶栏是： 1. 半透明，所以顶栏将与它下面的任何东西“相同颜色”； 2. 使用白色字体...当我在 Safari 中运行我的应用程序时，我两者都有...但是当我在 PhoneGap 中运行它时，顶部栏的字体颜色是 黑色 .如何使它白色？

试试这个可能会有帮助 1)alexvanderzon.com/metatags (2)maximilianhoffmann.com/article/building-ios-web-apps (3)mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

【参考方案7】：

我想一个更新的答案可能会对这里的人有所帮助，这适用于 cordova 3.7+ 和 iOS 8.x，并且不需要额外的插件。

在项目的 plist 文件中，确保“状态栏最初是隐藏的”和“基于控制器的状态栏外观”都设置为“否”

然后，在 MainViewController.m 中，- (void)viewDidLoad 内添加：

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:YES];

或

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault animated:YES];

状态栏中的白色或黑色文本。

或者完全隐藏，将上面的两个 plist 属性设置为 YES，这似乎可以隐藏它。