web-dev-qa-db-fra.com

Comment masquer complètement la barre d'état dans iOS avec Cordova?

Je ne souhaite pas avoir de barre d'état pour l'application Cordova que je développe. J'y suis presque, la barre d'état ne s'affiche pas sur l'écran de démarrage. Cependant, sur la première page qui se charge, vous voyez un clignotement de la barre d'état, avant qu'elle ne soit masquée.

J'ai coché la case "masquer la barre d'état" dans Xcode.

J'ai ajouté le plugin cordova-plugin-statusbar, et sur le callback deviceready, j'appelle StatusBar.hide().

Cependant, lorsque l'image de démarrage disparaît et que la première page est en cours de rendu, une barre d'état clignote avant l'affichage de la page. Ce n'est que pour une fraction de seconde, mais a l'air horrible.

Quelqu'un sait-il comment la barre d'état peut être cachée complètement, sans clignoter avant d'être cachée?

ioscordovacordova-plugins
26
Geoff Smith

Réponse originale

Bien que je réponde très tard à cette question, mais après une journée complète de recherche, je me suis contenté de la faire fonctionner. J'aimerais donc la partager avec d'autres.

Selon les docs (et comme jcesarmobile répondu):

Se cacher au démarrage

Pendant l'exécution, vous pouvez utiliser la fonction StatusBar.hide ci-dessous, mais si vous souhaitez que la barre d'état soit masquée au démarrage de l'application, vous devez modifier le fichier Info.plist de votre application.

Ajoutez/modifiez ces deux attributs s'ils ne sont pas présents. Définissez "La barre d'état est Initialement masquée" sur "OUI" et réglez "Afficher la barre d'état basée sur le contrôleur." Sur "NON". Si vous le modifiez manuellement sans Xcode, les touches et les valeurs sont:

Cela nécessite que vous modifiiez le fichier info.plist de votre application à l'intérieur du fichier platforms/ios/<app-name>/<app-name>-Info.plist pour ajouter les lignes suivantes:

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

Mais cela n’est pas recommandé, car vous devrez enregistrer cette modification qui pourrait être écrasée après le processus de génération.

(Veuillez voir la mise à jour 2 d'ici si vous utilisez la dernière CLI de Cordova)

Donc, comme alternative propre, vous devez utiliser cordova-custom-config . Selon les docs:

Pourquoi devrais-je l'utiliser?

Certaines préférences de plate-forme peuvent être définies via Cordova/Phonegap dans le config.xml, beaucoup (en particulier ceux liés aux nouvelles versions de la plate-forme .__) ne le peuvent pas. Une solution consiste à modifier manuellement le fichier fichiers de configuration dans le répertoire plates /, mais ce n'est pas le cas maintenable sur plusieurs machines de développement ou dans un environnement CI où les opérations de construction ultérieures peuvent écraser vos modifications.

Ce plugin tente de combler cette lacune en autorisant des fichiers .__ supplémentaires. préférences spécifiques à la plate-forme à définir après l'opération de préparation a terminé, autorisant les préférences définies par Cordova à être Remplacé ou d'autres préférences non spécifiées à définir. Depuis le les préférences personnalisées sont entrées dans le config.xml, elles peuvent être commis au contrôle de version et donc appliqués à plusieurs machines de développement, environnements CI, et maintenues entre les générations ou même si une plate-forme est supprimée et ré-ajoutée.

Il ne vous reste plus qu'à exécuter la commande suivante pour votre application Cordova:

cordova plugin add cordova-custom-config --save

Et ajoutez ceci à votre fichier config.xml sous le bloc <platform name="ios">:

Veuillez vous référer au plugin cordova-custom-config (version> 5) pour plus d'informations

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

Mise à jour 1 (20 février 2018)

Si vous utilisez la version <5 du plugin cordova-custom-config, remplacez la balise custom-config-file par config-file.

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

Mise à jour 2 (6 juillet 2018)

Depuis Cordova CLI 6, vous n'avez plus besoin d'installer le plug-in cordova-custom-config pour modifier le fichier platforms/ios/*-info.plist. Cordova CLI a le support intégré de celui-ci en utilisant la balise edit-config. Alors maintenant, vous pouvez simplement ajouter ce qui suit dans votre config.xml sous <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>

Cette modification peut échouer lorsque vous créez votre application Cordova, car elle entrera en conflit avec le fichier platform/ios/ios.json. Pour résoudre ce problème, vous avez deux options ( référence ):

Option 1 (exagération mais travail)

Ajoutez à nouveau la plate-forme iOS:

ionic cordova platform remove ios
ionic cordova platform add ios

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

Option 2 (recommandé mais ne fonctionne pas pour moi)

Utilisez platform/ios/ios.json au lieu de *-Info.plist dans le fichier edit-config. Donc, la configuration finale, vous devez ajouter:

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

Et ensuite faire:

cordova prepare ios
45
Shashank Agrawal

MODIFIER:

Depuis Cordova CLI 6.5.0, vous pouvez utiliser la balise edit-config pour écrire dans le fichier info.plist sans plugin . Cela devrait masquer la barre d’état au démarrage.

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

Se cacher au démarrage

Pendant l'exécution, vous pouvez utiliser la fonction StatusBar.hide ci-dessous, mais si vous souhaitez que la barre d'état soit masquée au démarrage de l'application, vous devez modifier le fichier Info.plist de votre application.

Ajoutez/modifiez ces deux attributs s'ils ne sont pas présents. Définissez "La barre d'état est Initialement masquée" sur "OUI" et réglez "Afficher la barre d'état basée sur le contrôleur." Sur "NON". Si vous le modifiez manuellement sans Xcode, les touches et les valeurs sont:

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

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

15
jcesarmobile

J'avais aussi le même problème pour Android. Il a été résolu en appelant simplement la fonction statusBar () ci-dessous à partir de la fonction 'appCtrl' init (). 

J'espère que cela fonctionnera pour iOS.

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

Vérifiez ce plugin Personnalisation de la barre d'état avec Cordova

0
Bharath Vankireddy

Cela a fonctionné pour moi:

Sur votre Mac ou VM xcode, sélectionnez CIBLES-> Votre application.

Ensuite, dans le menu INFO, sur PROPRIÉTÉS CIBLES PERSONNALISÉES iOS, ajoutez ces NOUVELLES propriétés:

La barre d'état est initialement masquée -> puis définissez la valeur sur YES.

Afficher l'apparence de la barre d'état basée sur le contrôleur -> Définissez ensuite la valeur sur NO.

Construisez et vous ne devriez avoir aucune barre d'état.

printscreen: http://prntscr.com/fg0jtf

0
Web Developer