如何使用Cordova完全隐藏iOS中的状态栏?

时间:2016-01-14 17:26:18

标签: ios cordova cordova-plugins

我希望我正在开发的Cordova应用程序没有状态栏。我快到了,状态栏没有显示在启动画面上。但是,在加载的第一页上,您会看到状态栏的闪烁,然后才会被隐藏。

我已经检查了Xcode中的“隐藏状态栏”复选框。

我添加了cordova-plugin-statusbar插件,在deviceready回调中,我正在呼叫StatusBar.hide()

然而,当启动图像消失并且正在渲染第一页时,在显示页面之前会有一个状态栏闪烁。它只是一瞬间,但看起来很糟糕。

有人知道如何完全隐藏状态栏,而不会在隐藏之前闪烁吗?

4 个答案:

答案 0 :(得分:48)

原始答案

虽然我很晚才回答这个问题,但经过一整天的搜索,我完成了这项工作,所以我想与其他人分享。

根据docs(和jcesarmobile 一样回答):

  

隐藏在启动时

     

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

     

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

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

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

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

(如果您使用的是最新的Cordova CLI,请参阅此处的更新2)

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

  

为什么要使用它?

     

虽然可以通过设置某些平台首选项   很多config.xml中的Cordova / Phonegap(特别是与之相关的   较新的平台发布)不能。一种解决方案是手动编辑   platform /目录中的配置文件,但事实并非如此   可跨多个开发机器或CI环境维护   后续构建操作可能会覆盖您的更改。

     

这个插件试图通过允许额外的来解决这个差距   准备操作后要设置的特定于平台的首选项   已经完成,允许Cordova设置的偏好   被覆盖或其他未指定的首选项。自从   自定义首选项输入到config.xml,它们可以是   致力于版本控制,因此应用于多个版本   开发机器,CI环境,以及在构建之间维护   或者甚至删除并重新添加平台。

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

cordova plugin add cordova-custom-config --save

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

请参阅cordova-custom-config(版本&gt; 5)插件以获取更多信息

<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插件版本&lt; 5然后将custom-config-file标记替换为config-file

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

更新2(2018年7月6日)

Cordova CLI 6 以来,您现在不需要安装cordova-custom-config插件来更改platforms/ios/*-info.plist文件。 Cordova CLI使用edit-config标记对其进行内置支持。现在,您只需在config.xml下的<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文件冲突。要解决此问题,您有两个选项(reference):

选项1(过度杀伤但正常工作)

重新添加iOS平台:

ionic cordova platform remove ios
ionic cordova platform add ios

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

选项2(推荐但不适用于我)

platform/ios/ios.json文件中使用*-Info.plist代替edit-config。所以你必须添加最终配置:

<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

答案 1 :(得分:15)

编辑:

从Cordova CLI 6.5.0开始,您可以使用edit-config标记在没有插件的情况下在info.plist中写入。 这应该在启动时隐藏状态栏

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

隐藏在启动时

     

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

     

添加/编辑这两个属性(如果不存在)。设置&#34;状态栏是   最初隐藏&#34;到&#34;是&#34;并设置&#34;查看基于控制器的状态栏   外观&#34;到&#34;否&#34;。如果您在没有Xcode的情况下手动编辑它,那么键   和价值观是:

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

https://github.com/apache/cordova-plugin-statusbar

答案 2 :(得分:1)

这种方式对我有用:

在您的mac或VM xcode上,选择TARGETS-&gt;您的应用

然后在INFO菜单上,在CUSTOM iOS TARGET PROPERTIES上,添加以下新属性:

状态栏最初是隐藏的 - &gt;然后将值设置为YES。

查看基于控制器的状态栏外观 - &gt;然后将值设置为NO

构建,你应该没有状态栏。

printscreen:http://prntscr.com/fg0jtf

答案 3 :(得分:0)

我也遇到了同样的问题。 只需从&#39; appCtrl&#39;中调用以下statusBar()函数即可解决此问题。 init()函数。

希望它适用于iOS。

 $rootScope.statusBar = function(){
        document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    //console.log(StatusBar);
    StatusBar.hide();
}