如何使用 Cordova 在 iOS 中完全隐藏状态栏? [英] How to completely hide the status bar in iOS using Cordova?

问题描述

我希望我正在开发的 Cordova 应用程序没有状态栏.我快到了，状态栏没有显示在初始屏幕上.但是，在加载的第一页上，您会看到状态栏在隐藏之前闪烁.

I want to have no status bar for the Cordova app I am developing. I am nearly there, the status bar doesn't show on the splash screen. However on the first page that loads you see a flash of the status bar, before it gets hidden.

我在 Xcode 中勾选了隐藏状态栏"复选框.

I have checked the "hide status bar" checkbox in Xcode.

我添加了 cordova-plugin-statusbar 插件，并且在 deviceready 回调中，我正在调用 StatusBar.hide().

I have added the cordova-plugin-statusbar plugin, and on the deviceready callback, I'm calling StatusBar.hide().

但是，当启动图像消失并且正在呈现第一页时，在显示页面之前状态栏会闪烁.它只是一瞬间，但看起来很糟糕.

However when the splash image disappears and the first page is being rendered there is a flash of status bar prior to the page being display. It is only for a split second but looks awful.

有谁知道状态栏怎么才能完全隐藏，隐藏前不闪?

Anybody know how the status bar can be hidden completely, without flashing up before being hidden?

推荐答案

原答案

虽然我很晚才回答这个问题，但经过一整天的搜索，我得到了这个工作，所以我想与其他人分享.

Original Answer

Although I'm answering this question very late but after one full day of the search, I got this working simply so I would like to share it with others.

根据文档(以及像jcesarmobile 回答):

According to the docs (and like jcesarmobile answered):

在运行时你可以使用下面的 StatusBar.hide 函数，但是如果您希望在应用程序启动时隐藏状态栏，您必须修改您应用的 Info.plist 文件.

Hiding at startup

During runtime you can use the StatusBar.hide function below, but if you want the StatusBar to be hidden at app startup, you must modify your app's Info.plist file.

添加/编辑这两个属性(如果不存在).设置状态栏是最初隐藏"为是"并设置基于控制器的状态栏外观"到否".如果您在没有 Xcode 的情况下手动编辑它，则按键和值是:

Add/edit these two attributes if not present. Set "Status bar is initially hidden" to "YES" and set "View controller-based status bar appearance" to "NO". If you edit it manually without Xcode, the keys and values are:

这需要您修改 platforms/ios/<app-name>/<app-name>-Info.plist 中应用的 info.plist 文件文件添加以下几行:

This requires you to modify your app's info.plist file inside platforms/ios/<app-name>/<app-name>-Info.plist file to add the following lines:

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

但不建议这样做，因为这将要求您保存可能在构建过程后被覆盖的更改.

But that is not recommended because this will require you to save that change which might get overwritten after the build process.

(如果您使用的是最新的 Cordova CLI，请从此处查看更新 2)

因此，作为干净的替代方案，您应该使用 cordova-custom-config.根据文档:

So as the clean alternative you should use cordova-custom-config. According to docs:

虽然一些平台首选项可以通过config.xml 中的 Cordova/Phonegap，很多(尤其是与较新的平台版本)不能.一种解决方案是手动编辑平台/目录中的配置文件，但这不是可跨多台开发机器或 CI 环境进行维护后续构建操作可能会覆盖您的更改.

Why should I use it?

While some platform preferences can be set via Cordova/Phonegap in the config.xml, many (especially ones related to newer platform releases) cannot. One solution is to manually edit the configuration files in the platforms/ directory, however this is not maintainable across multiple development machines or a CI environment where subsequent build operations may overwrite your changes.

这个插件试图通过允许额外的在准备操作之后设置特定于平台的首选项已完成，允许 Cordova 设置的任一首选项要设置的覆盖或其他未指定的首选项.由于自定义首选项被输入到 config.xml 中，它们可以是致力于版本控制，因此适用于多个开发机器、CI 环境，并在构建之间进行维护或者即使删除并重新添加平台.

This plugin attempts to address this gap by allowing additional platform-specific preferences to be set after the prepare operation has completed, allowing either preferences set by Cordova to be overridden or other unspecified preferences to be set. Since the custom preferences are entered into the config.xml, they can be committed to version control and therefore applied across multiple development machines, CI environments, and maintained between builds or even if a platform is removed and re-added.

现在，您所要做的就是为您的 Cordova 应用程序运行以下命令:

Now, all you have to do is to run the following command for your Cordova app:

cordova plugin add cordova-custom-config --save

并将其添加到 <platform name="ios"> 块下的 config.xml 文件中:

And add this to your config.xml file under <platform name="ios"> block:

请参考 cordova-custom-config(版本 > 5)插件了解更多信息

Please refer cordova-custom-config (version > 5) plugin for more information

<custom-config-file parent="UIStatusBarHidden" platform="ios" target="*-Info.plist">
    <true/>
</custom-config-file>
<custom-config-file parent="UIViewControllerBasedStatusBarAppearance" platform="ios" target="*-Info.plist">
    <false/>
</custom-config-file>

更新 1(2018 年 2 月 20 日)

如果您使用的是cordova-custom-config插件版本<5 然后用 config-file 替换 custom-config-file 标签.

https://github.com/dpa99c/cordova-custom-config#changes-in-cordova-custom-config5

自 Cordova CLI 6 起，您现在不需要安装 cordova-custom-config 插件来更改 platforms/ios/*-info.plist 文件.Cordova CLI 使用 edit-config 标签对其进行了内置支持.因此，现在您只需在 <platform name="ios"> 下的 config.xml 中添加以下内容:

Since Cordova CLI 6, you now don't require to install the cordova-custom-config plugin for altering the platforms/ios/*-info.plist file. Cordova CLI has the inbuilt support of it using edit-config tag. So now you can simply add the following in your config.xml under <platform name="ios">:

<edit-config file="*-Info.plist" mode="merge" target="UIStatusBarHidden">
    <true />
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
    <false />
</edit-config>

当您构建 Cordova 应用程序时，此更改可能会失败，因为它会与 platform/ios/ios.json 文件冲突.要解决此问题，您有两个选择(参考):

This change might fail when you build your Cordova application because it will conflict with platform/ios/ios.json file. To fix this you have two options (reference):

重新添加iOS平台:

ionic cordova platform remove ios
ionic cordova platform add ios

https://issues.apache.org/jira/browse/CB-13564

在 edit-config 文件中使用 platform/ios/ios.json 而不是 *-Info.plist.所以你必须添加的最终配置:

Use platform/ios/ios.json instead of *-Info.plist in the edit-config file. So the final config you have to add:

<edit-config file="platforms/ios/ios.json" mode="merge" target="UIStatusBarHidden">
    <true />
</edit-config>
<edit-config file="platforms/ios/ios.json" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
    <false />
</edit-config>

然后做:

cordova prepare ios

这篇关于如何使用 Cordova 在 iOS 中完全隐藏状态栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！