web-dev-qa-db-fra.com

Barre d'état blanche dans iOS Phonegap?

comment rendre la barre d'état supérieure transparente avec du texte blanc dans Phonegap 3.1.0 pour iOS7?

L'application a l'air bien dans Safari pour mobile, mais lorsque j'essaie de l'exécuter dans Phonegap, le texte situé en haut de la barre est blanc uniquement pendant le chargement de l'application. Il est ensuite noir, quels que soient les paramètres définis dans la configuration du projet.

Pour le moment, <meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent"> dans la page Web et 'Status Bar Style' = 'Noir translucide' dans XCode ... n'aide pas.

Pls aide!

iosxcodecordovastatusbar
11
user3007104

Vous pouvez le faire sans balises méta ni éditer quoi que ce soit dans XCode.

Tout d'abord, installez le plugin statusbar via CLI:

cordova plugin add cordova-plugin-statusbar

Vous pouvez ensuite utiliser ces préférences pour styliser la barre d'état (dans config.xml):

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

Cela vous donnera une barre transparente dans iOS 7 avec du texte blanc. Pour d'autres options, consultez http://plugins.cordova.io/#/package/org.Apache.cordova.statusbar

25
rickdmer

enfin, j'ai trouvé une solution.

Assurez-vous que vous avez les éléments suivants: Sur votre index.html, utilisez la balise Meta suivante:

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

Sous Xcode, ouvrez [YourPrjectName] .plist & ajoutez les lignes suivantes:

"Status bar style" = "Style de noir transparent (alpha de 0,5)" ET
"Afficher l'apparence de la barre d'état basée sur le contrôleur" = "NON"

Sans deuxième ligne, cela ne fonctionnera pas (en fait, c'était le problème dans mon cas).

10
user3007104

si vous utilisez phonegap build, vous pouvez appeler 

StatusBar.styleLightContent();

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

2
Leo Chen

Jetez un oeil sur le lien ci-dessous, espérons que cela pourrait vous aider.

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

1
Gilana

Peut-être trop tard, mais quelqu'un d'autre avec la même question peut résoudre ce problème en installant le plugin ci-dessous.

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

Ensuite, construisez et exécutez l'application, le problème sera résolu

1
Malaka Gunawardhana

Ajouter celui-ci 

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

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

Le problème de la barre d'état dans iOS7

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

0
Ved

J'ai pensé qu'une réponse plus à jour pourrait aider quelqu'un ici, cela fonctionne dans cordova 3.7+ et iOS 8.x et supprime la nécessité du plugin supplémentaire.

Dans le fichier plist de votre projet, assurez-vous que "La barre d'état est initialement masquée" et que "Afficher l'apparence de la barre d'état basée sur le contrôleur" est défini sur "NON".

Ensuite, dans MainViewController.m, dans - (void)viewDidLoad, ajoutez:

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

ou

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

pour du texte blanc ou noir dans votre barre d'état. 

Sinon, définissez les deux attributs ci-dessus sur YES, ce qui semble le masquer. 

0
OliverJ90