web-dev-qa-db-fra.com

les écrans de démarrage des applications ioniques ne sont pas affichés

J'ai essayé à plusieurs reprises d'ajouter un écran de démarrage à mon application Ionic Avec cette configuration, les icônes fonctionnent mais les splashscreen ne fonctionnent pas. Il affiche un écran vide, pas même le cordova default splashscreen.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.toggle423609" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.Apache.org/ns/1.0">
  <name>Toggle</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="[email protected]" href="http://example.com.com/">
      Your Name Here
    </author>
  <content src="index.html"/>
  <access Origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="Android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="AutoHideSplashScreen" value="false" />

  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  <platform name="Android">
    <icon src="resources/Android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/Android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/Android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/Android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/Android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/Android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/Android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources/Android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources/Android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources/Android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources/Android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources/Android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources/Android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/Android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/Android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/Android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/Android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/Android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <platform name="ios">
    <icon src="resources/ios/icon/icon.png" width="57" height="57"/>
    <icon src="resources/ios/icon/[email protected]" width="114" height="114"/>
    <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
    <icon src="resources/ios/icon/[email protected]" width="80" height="80"/>
    <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
    <icon src="resources/ios/icon/[email protected]" width="100" height="100"/>
    <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
    <icon src="resources/ios/icon/[email protected]" width="120" height="120"/>
    <icon src="resources/ios/icon/[email protected]" width="180" height="180"/>
    <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
    <icon src="resources/ios/icon/[email protected]" width="144" height="144"/>
    <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
    <icon src="resources/ios/icon/[email protected]" width="152" height="152"/>
    <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
    <icon src="resources/ios/icon/[email protected]" width="58" height="58"/>
    <icon src="resources/ios/icon/[email protected]" width="87" height="87"/>
    <splash src="resources/ios/splash/Default-568h@2x~iphone.png" height="1136" width="640"/>
    <splash src="resources/ios/splash/Default-667h.png" height="1334" width="750"/>
    <splash src="resources/ios/splash/Default-736h.png" height="2208" width="1242"/>
    <splash src="resources/ios/splash/Default-Landscape-736h.png" height="1242" width="2208"/>
    <splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" height="1536" width="2048"/>
    <splash src="resources/ios/splash/Default-Landscape~ipad.png" height="768" width="1024"/>
    <splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" height="2048" width="1536"/>
    <splash src="resources/ios/splash/Default-Portrait~ipad.png" height="1024" width="768"/>
    <splash src="resources/ios/splash/Default@2x~iphone.png" height="960" width="640"/>
    <splash src="resources/ios/splash/Default~iphone.png" height="480" width="320"/>
  </platform>
</widget>
androidcordovaionic-framework
10
sridharan

  1. Commencez par lire votre plugin:

    $ ionic plugin remove cordova-plugin-splashscreen
$ ionic plugin add cordova-plugin-splashscreen
  2. Ensuite, éditez l’image splash dans votre dossier resources.
  3. Exécuter $ ionic resources --splash dans la CLI
  4. Reconstruisez $ ionic build Android et lancez votre application

Vérification Documentation Ionic - Génération d’images d’écrans d’icône et écran de démarrage

Si cela ne fonctionne pas, vous devez supprimer et lire la plate-forme sur laquelle vous rencontrez le problème.

$ cordova platform remove Android (or ios)
$ cordova platform add Android (or ios)
18
sznrbrt

Voici ta réponse !! 

Si vous utilisez Cordova 6.4.0 (appuyez sur cordova -v sur votre terminal pour vérifier la version), vous serez confronté à ce problème (les icônes et les écrans de démarrage ne seront pas générés après la construction).

Afin de résoudre le problème, vous avez deux options:

  1. changez le mot densité en qualifier dans votre config.xml. Pour par exemple. mettre

<icon src="resources\Android\icon\drawable-ldpi-icon.png" qualifier="ldpi"/> à la place de <icon src="resources\Android\icon\drawable-ldpi-icon.png" density="ldpi"/>. Construisez le projet. Marchera.

  1. Installez simplement la version 6.3.1 de cordova en appuyant sur npm install -g [email protected] dans votre terminal. Supprimez puis ajoutez la plate-forme, puis construisez-la. Fonctionne comme un charme !!.

Cordialement!! : p

10
Sushree Moharana

Après retirer et ajouter cordova

   $ cordova platform remove Android (or ios)
   $ cordova platform add Android (or ios)

Vous obtiendrez un dossier /res avec vos icônes et vos écrans de démarrage. Copiez le contenu de /res et collez-le dans platfomrs/Android/res, ceci remplacera l'icône standard et les écrans de démarrage.

Ensuite, construisez votre application et vous obtiendrez vos images personnalisées.

J'ai utilisé le modèle d'onglets ioniques, sans modifications.

6
Lucas Isasmendi

depuis le 07 novembre 2016. Cordova 6.4.0 est sorti avec la nouvelle version d'Android - [email protected].

Très probablement, vous utilisez Android @ 5 dans votre Cordova (ou dans l'ancienne version d'Android) . Essayez de mettre à jour/installer la nouvelle version de Cordova Android.

Pour mettre à niveau: Cordova mise à jour de la plateforme [email protected]

Pour l'ajouter explicitement: Plate-forme cordova, ajoutez [email protected]

https://cordova.Apache.org/announcements/2016/11/07/Android-release.htmlhttps://cordova.Apache.org/blog/

4
Shahar ドーン Levi

Mon écran de démarrage n'apparaissait pas non plus (Ionic 3). J'ai trouvé ceci Link être très utile. Ces entrées dans le config.xml ont fait l'affaire pour moi:

<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
4
Ramon Rambo

Nous essayions de mettre à jour l'écran de démarrage de l'application ionique à l'aide du système de configuration ci-dessous, mais nous avons échoué:

Cordova CLI: 6.4.0 Ionic CLI Version: 2.1.7 Ionic App Lib Version: 2.1.4 ios-deploy version: 1.9.0 ios-sim version: 5.0.11 OS: macOS Sierra Node Version: v6.9.1 Xcode version: Xcode 8.1 Build version 8B62

Nous avons pu générer un écran de démarrage et résoudre le problème dans le système de configuration ci-dessous:

Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 1.2.4 Ionic CLI Version: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1 ios-deploy version: Not installed ios-sim version: Not installed OS: Mac OS X El Capitan Node Version: v6.6.0 Xcode version: Xcode 8.1 Build version 8B62

1
Naushad Qamar

j'ai eu le même problème, j'ai résolu manuellement en allant au chemin MY_PROJECT\platforms\Android\res et supprimer drawable* et mipmap* et ensuite copier drawable* et mipmap* de MY_PROJECT\res puis reconstruire à nouveau le projet

1
Bundit.Ng

ajoutez des plug-ins Splash Screen Cordova dans votre application à l'aide de la commande suivante

    $ionic cordova plugin add cordova-plugin-splashscreen
    $npm install --save @ionic-native/splash-screen

Ajouter la ligne suivante dans votre fichier config.xml

<preference name="FadeSplashScreen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />

Supprimer également SplashScreen.hide() dans le fichier app.component.ts

Plus de détails avec un exemple de visite: https://answerdone.blogspot.com/2018/02/ionic-3-splash-screen-plugins.html

0
Ganesh Garad

Vérifiez que le plug-in "cordova-plugin-splashscreen" est installé (dans le dossier plugins/ ou en exécutant la commande ionic cordova plugins (pour Ionic v3 +) ou ionic plugins (les anciennes versions d'Ionic). 

Si ce n'est pas là, lancez:
ionic plugin add cordova-plugin-splashscreen (Ionic v1 - v2)
ionic cordova plugin add cordova-plugin-splashscreen (Ionic v3 +)

Sans le plugin, iOS affichera toujours l'écran de démarrage brièvement, mais pas Android.

0
Ilya Vinogradov