caracteristicas - ios versiones

Contenidos superpuestos de la barra de estado de iOS

Question

He construido la aplicación Phonegap, funciona bien en Android y Windows. Pero para iOS me enfrento a un problema ya que los contenidos de la barra de estado y de la página se mezclan, por lo tanto, no puedo presionar el botón Atrás que se encuentra en el encabezado. ¿Puede algún cuerpo ayudarme con esto ..?

Este es mi archivo 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="[email protected]">
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>

Answer 1

Añade estas líneas a tu archivo config.xml

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<gap:plugin name="com.phonegap.plugin.statusbar" />

Answer 2

Esto se puede lograr con la ayuda del plugin de la barra de estado . Todo lo que necesita es instalar el complemento a través del complemento de la línea de comando phonegap plugin add https://github.com/apache/cordova-plugin-statusbar.git y luego agregar StatusBar.hide(); Evento onDeviceReady.

Answer 3

La respuesta aceptada de sunil ya no es relevante, el complemento está en desuso.

Usa lo siguiente en tu 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" />

Answer 4

Para el uso detallado en codova 6+ ahora, para más de la solución de @ sunil, debemos usar

cordova plugins add -save cordova-plugin-statusbar

Para un uso detallado: https://www.npmjs.com/package/cordova-plugin-statusbar

Answer 5

Resolución aplicada @sunil pero,

Mi problema fue de "Política de seguridad de contenido" en iOS 10

Agregado debajo de la línea a index.html se resolvió el problema:

<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''">

Answer 6

Si desea ocultar la barra de estado por completo, puede agregar dos claves a su info.plist que son booleanas:

Status bar is initially hidden - YES
View controller-based status bar appearance - NO

Answer 7

agregue estas líneas en config.xml use esto para solucionar su problema y aparecerá la barra de estado:

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