logo标签列表

iOS 状态栏重叠内容

ioscordovaphonegap-pluginsios-statusbar
25
我已经构建了一个PhoneGap应用程序，在Android和Windows上运行良好。 但是对于iOS，我遇到了问题，状态栏内容和页面内容混在一起，因此我无法点击标题栏提供的返回按钮。 有人可以帮助我解决这个问题吗..？ 这是我的config.xml文件。
   <?xml version="1.0" encoding="UTF-8"?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"

        id        = "io.example.com"
        version     = "1.0.2">
    <name>MyAPP</name>

    <description>

    </description>

    <author  email="rakesh@gmail.com">
        Rakesh
    </author>

    <access origin="*"/>


    <content src="index.html" />


    <preference name="target-device" value="universal" />   <!-- all: possible values handset, tablet, or universal -->
    <!-- <preference name="fullscreen" value="true" />  -->          <!-- all: hides the status bar at the top of the screen -->
    <preference name="webviewbounce" value="false" />        <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
    <preference name="ios-statusbarstyle" value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
    <preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
    <preference name="android-minSdkVersion"      value="7" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
    <preference name="phonegap-version" value="3.7.0" />
    <icon src="icon.png" />

    <icon src="icon-57.png"            gap:platform="ios"        width="57" height="57" />
    <icon src="icon-72.png"            gap:platform="ios"        width="72" height="72" />
    <icon src="icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
    <icon src="icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />
    <icon src="icon-120.png"           gap:platform="ios"        width="120" height="120" />
    <icon src="icon-76.png"            gap:platform="ios"        width="76" height="76" />
    <icon src="icon-76-2x.png"         gap:platform="ios"        width="152" height="152" />

    <gap:plugin name="com.phonegap.plugin.statusbar" />
    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="org.apache.cordova.dialogs" />
    <gap:plugin name="org.apache.cordova.camera" />
    <gap:splash src="SplashScreenImage.jpg" gap:platform="winphone" />
    <gap:splash src="splash.png" />
    <gap:splash src="screen-iphone-portrait.png"         gap:platform="ios"     width="320" height="480" />
    <gap:splash src="screen-iphone-portrait-2x.png"      gap:platform="ios"     width="640" height="960" />
    <gap:splash src="screen-iphone-portrait-568h-2x.png" gap:platform="ios"     width="640" height="1136" />
    <gap:splash src="screen-ipad-portrait.png"           gap:platform="ios"     width="768" height="1024" />
    <gap:splash src="screen-ipad-landscape.png"          gap:platform="ios"     width="1024" height="768" />

    <gap:config-file platform="ios" parent="CFBundleShortVersionString">
    <string>100</string>
    </gap:config-file>

    <feature name="App">
      <param name="android-package" value="org.apache.cordova.App"/>
    </feature>
    <feature name="http://api.phonegap.com/1.0/network"/>

    <!-- Deprecated plugins element. Remove in 3.0 -->


</widget>
请分享您的config.xml文件。 - Sunil
请分享一些代码内容以更好地理解您的错误。 - Ali
7个回答
28

sunil 提供的被接受的答案已经过时，该插件已被弃用。

请在您的 config.xml 文件中使用以下内容。

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<plugin spec="https://github.com/apache/cordova-plugin-statusbar.git" source="git" />
这里有一个很好的解释：http://devgirl.org/2014/07/31/phonegap-developers-guid/ - TechSavvySam
这创建了一个干净、间隔良好的状态栏，具有黑色背景和白色字体颜色，将应用程序与栏分开。非常适合我的应用程序，谢谢~ - mintedsky
尽管我按照你所说的做了，但它仍然无法正常工作。 - Mohan
16

请将以下代码添加到您的config.xml文件中

<preference name="StatusBarOverlaysWebView" value="false" />
        <preference name="StatusBarBackgroundColor" value="#000000" />
        <preference name="StatusBarStyle" value="lightcontent" />
      <gap:plugin name="com.phonegap.plugin.statusbar" />
4
这可以通过使用 状态栏插件 来实现。 您只需要通过命令行安装插件，输入phonegap plugin add https://github.com/apache/cordova-plugin-statusbar.git，并在 onDeviceReady 事件中添加 StatusBar.hide(); 即可。
1
问题不是要隐藏元素，而是不应该重叠内容。 - GOSCHEN
4
3

如果您想完全隐藏StatusBar，您可以在info.plist中添加两个布尔键：

Status bar is initially hidden - YES

View controller-based status bar appearance - NO
3

采用了@sunil的解决方案，但是我的问题与iOS 10上的“内容安全策略”有关。

将以下行添加到index.html中可以解决该问题：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
0

在config.xml中添加以下行，使用它将修复您的问题并显示状态栏：

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

<preference name="StatusBarBackgroundColor" value="#000000"/>

<preference name="StatusBarStyle" value="lightcontent" />
“这些行”是什么意思？ - Nico Haase
这并没有提供问题的答案。如果要批评或请求作者澄清，请在他们的帖子下留言。-【来自审查】 - Nico Haase
在混合应用程序中，有一个配置文件，在其中我们必须进行一些条目的输入，以便以适当的方式显示状态栏。 - Lakshay Sharma
对我没用。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接