proyecto - ¿Cómo ocultar completamente la barra de estado en iOS usando Cordova?

generar app ios cordova

Question

No quiero tener una barra de estado para la aplicación Cordova que estoy desarrollando. Estoy casi allí, la barra de estado no aparece en la pantalla de bienvenida. Sin embargo, en la primera página que se carga, se ve un destello de la barra de estado antes de que se oculte.

He marcado la casilla de verificación "ocultar barra de estado" en Xcode.

He agregado el cordova-plugin-statusbar , y en la deviceready llamada deviceready , estoy llamando a StatusBar.hide() .

Sin embargo, cuando la imagen de bienvenida desaparece y se está procesando la primera página, aparece un destello de la barra de estado antes de que se muestre la página. Es solo por una fracción de segundo, pero se ve horrible.

¿Alguien sabe cómo la barra de estado se puede ocultar por completo, sin flashear antes de ocultarse?

Answer 1

Respuesta original

Aunque estoy respondiendo esta pregunta muy tarde, pero después de un día completo de la búsqueda, lo hice funcionar simplemente, así que me gustaría compartirlo con otros.

De acuerdo con los docs (y como respondió jcesarmobile ):

Esconder al inicio

Durante el tiempo de ejecución puede usar la función StatusBar.hide a continuación, pero si desea que StatusBar esté oculta al inicio de la aplicación, debe modificar el archivo Info.plist de su aplicación.

Agregue / edite estos dos atributos si no está presente. Establezca "La barra de estado se oculta inicialmente" en "SÍ" y configure "Ver apariencia de la barra de estado basada en el controlador" en "NO". Si lo edita manualmente sin Xcode, las claves y los valores son:

Esto requiere que modifique el archivo info.plist su aplicación dentro de las platforms/ios/<app-name>/<app-name>-Info.plist para agregar las siguientes líneas:

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

Pero eso no se recomienda porque esto requerirá que guarde ese cambio que podría sobrescribirse después del proceso de compilación.

(Consulte la Actualización 2 desde aquí si está utilizando la última CLI de Cordova)

Entonces, como alternativa limpia debería usar cordova-custom-config . De acuerdo con los documentos:

¿Por qué debería usarlo?

Si bien algunas preferencias de plataforma se pueden establecer a través de Cordova / Phonegap en config.xml , muchas (especialmente las relacionadas con las versiones de plataforma más nuevas) no pueden. Una solución es editar manualmente los archivos de configuración en las plataformas / directorio; sin embargo, esto no se puede mantener en múltiples máquinas de desarrollo o en un entorno de CI donde las operaciones de construcción posteriores pueden sobrescribir los cambios.

Este complemento intenta cubrir este vacío al permitir que se establezcan preferencias adicionales específicas de la plataforma después de que se haya completado la operación de preparación, lo que permite anular las preferencias establecidas por Cordova o establecer otras preferencias no especificadas. Dado que las preferencias personalizadas se ingresan en config.xml , se pueden comprometer con el control de versiones y, por lo tanto, se pueden aplicar en múltiples máquinas de desarrollo, entornos de CI y mantenidas entre compilaciones o incluso si se quita y vuelve a agregar una plataforma.

Ahora, todo lo que tienes que hacer es ejecutar el siguiente comando para tu aplicación Cordova:

cordova plugin add cordova-custom-config --save

Y agréguelo a su archivo config.xml en el bloque <platform name="ios"> :

Consulte el plugin cordova-custom-config (versión> 5) para obtener más información

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

Actualización 1 (20 de febrero de 2018)

Si está utilizando la versión del complemento cordova-custom-config <5, entonces reemplace la custom-config-file con config-file .

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

Actualización 2 (6 de julio de 2018)

Desde Cordova CLI 6 , ahora no necesita instalar el complemento cordova-custom-config para alterar el archivo platforms/ios/*-info.plist . Cordova CLI tiene el soporte incorporado utilizando la etiqueta edit-config . Ahora puede simplemente agregar lo siguiente en su config.xml bajo <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>

Este cambio puede fallar cuando crea su aplicación Cordova porque entrará en conflicto con el archivo platform/ios/ios.json . Para solucionar esto, tiene dos opciones ( reference ):

Opción 1 (Overkill pero funciona)

Vuelva a agregar la plataforma de iOS:

ionic cordova platform remove ios
ionic cordova platform add ios

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

Opción 2 (Recomendado pero no funciona para mí)

Use platform/ios/ios.json lugar de *-Info.plist en el archivo edit-config . Entonces la configuración final que tienes que agregar:

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

Y luego hazlo:

cordova prepare ios

Answer 2

Compruebe la personalización de esta https://github.com/apache/cordova-plugin-statusbar complemento https://github.com/apache/cordova-plugin-statusbar

Answer 3

De esta manera me funcionó:

En su Mac o VM xcode, seleccione OBJETIVOS-> Su aplicación

Luego, en el menú INFO, en PROPIEDADES DE TARJETAS PERSONALIZADAS DE iOS, agregue estas NUEVAS propiedades:

La barra de estado está oculta inicialmente -> Luego ajuste el valor a SÍ.

Ver la apariencia de la barra de estado basada en el controlador -> A continuación, establezca el valor en NO

Build y no deberías tener una barra de estado.

printscreen: http://prntscr.com/fg0jtf

Answer 4

EDITAR:

Desde Cordova CLI 6.5.0 puede usar la etiqueta edit-config para escribir en el info.plist sin un plugin. Esto debería ocultar la barra de estado al inicio

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

Esconder al inicio

Durante el tiempo de ejecución puede usar la función StatusBar.hide a continuación, pero si desea que StatusBar esté oculta al inicio de la aplicación, debe modificar el archivo Info.plist de su aplicación.

Agregue / edite estos dos atributos si no está presente. Establezca "La barra de estado se oculta inicialmente" en "SÍ" y configure "Ver apariencia de la barra de estado basada en el controlador" en "NO". Si lo edita manualmente sin Xcode, las claves y los valores son:

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

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

Answer 5

También estaba teniendo el mismo problema para Android. Se resolvió simplemente llamando a la función de abajo stateBar () desde la función ''appCtrl'' init ().

Espero que funcione para iOS.

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