Je travaille avec une application React Native et j'essaie de définir un écran de lancement personnalisé, mais je ne peux pas.

React Native crée un LaunchScreen.xib par défaut, j'ai donc créé un LaunchImage dans Images.xcassets:

J'ai également lu que je devais modifier le "Fichier de l'écran de lancement" sous "Icônes d'application et images de lancement" dans mes options:

Une fois que j'ai fait cela, mon écran de lancement est devenu totalement noir et lorsque l'application est chargée, il y a des cadres noirs en haut et en bas:

Je ne sais donc pas ce que je dois faire pour définir mon écran de lancement dans mon projet React Native.

Je serai reconnaissant si quelqu'un peut m'aider avec ces problèmes.

Merci d'avance.

J'ai pu résoudre le problème, à l'aide de ce fil de discussion: Launch Image n'apparaissant pas dans l'application iOS (en utilisant Images.xcassets)

Alors je vais l'expliquer en profondeur au cas où ça pourrait aider quelqu'un d'autre.

Tout d'abord , vous devez créer certaines images. Ce que j'ai utilisé pour cela était ce modèle et cette page Web avec un générateur automatique: TiCons

Lorsque j'ai téléchargé mes images, j'ai pris celles dans le dossier assets / iphone, je n'ai pris que celles-là:

• Par défaut@2x.png (640x960)
• Par défaut-568h@2x.png (640x1136)
• Par défaut-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Default-Landscape-736h@3x.png (2208x1242)

Vous avez également besoin de ce fichier Contents.json dans le même dossier, je l'ai obtenu d'un ami:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

Donc, à ce stade, j'ai créé un dossier appelé LaunchImage.launchimage dans le dossier Images.xcassets de mon projet React Native et enregistrez les images et le fichier Contents.json à l'intérieur:

Deuxièmement , vous devez ouvrir votre projet dans Xcode et dans les paramètres "Général", sous " Icônes d'application et images de lancement ", nous devons laisser l'option " Lancer le fichier d'écran " vide (nous pouvons également supprimer le fichier LaunchScreen.xib dans notre projet ), puis cliquez sur " Utiliser le catalogue d'actifs ". Un modal s'ouvrira, nous choisissons de migrer le catalogue Images

Maintenant, dans le sélecteur " Launch Images Source ", nous pouvons choisir le dossier que nous avons créé auparavant, LaunchImage (celui avec nos images):

Nous choisissons ceci au lieu de Brand Assets et nous pouvons supprimer le dossier Brand Assets .

À ce stade, nous pourrons exécuter notre application React Native avec nos images de lancement personnalisées:

Je sais que cela semble un peu complexe pour une tâche soi-disant facile, mais après avoir beaucoup lu à ce sujet, c'était la seule façon de faire fonctionner mes images de démarrage, alors je voulais partager avec la communauté.

Assurez-vous de supprimer l'application du simulateur. Ensuite, nettoyez votre projet.

J'ai beaucoup regardé ces réponses dans des solutions contenant des SO pour savoir comment créer un nouvel écran de lancement. Je veux dire, réfléchissons-y une minute.

Lorsque nous créons un nouveau projet natif de réaction, que voyons-nous pour l'écran de lancement?

> Écran de lancement par défaut de Facebook

Alors ça m'a fait réfléchir, comment ont-ils fait?

Ils ont créé un LaunchScreen.xib

Je pense qu'il doit y avoir une raison à cela. Je suis donc entré dans le LaunchScreen.xibet j'ai modifié le texte par défaut "React Native ..." ou ce qu'il a dit. J'ai exécuté l'application une fois de plus pour voir que l'écran de lancement reflétait mes modifications.

Solution 1 Modifiez le LaunchScreen.xib existant

Solution 2 Créez le mien

Donc je l'ai fait, il m'a fallu plus de temps pour taper cette réponse que d'apprendre à créer la mienne. Both of these solutions are compatible with all the devices.

Étape 1:

Supprimer LaunchScreen.xib

étape 2:

cliquez sur clic images.xcassets droit dans l'espace blanc cliquez **import**puis sélectionnez l'image que vous souhaitez ajouter.

étape 3:

Faites un clic droit sur le dossier racine de votre projet et ajoutez un nouveau fichier de type Launch Screenet nommez-le comme vous le souhaitez.

étape 4

Cliquez sur votre projet dans la navigation de gauche, allez dans Settings> Generalet sous App Icons and Launch Images. Assurez-vous que ce champ Launch Image Sourceest vide et que le nom Launch Screen Fileest identique à celui de votre nouvel écran de lancement.

étape 5

Cliquez sur votre tout nouveau fichier que vous avez créé step 2, faites-le glisser Image Viewou modifiez-le à votre guise.

Alors voilà, vous avez terminé. Vous n'avez même pas besoin de nettoyer la solution, il suffit de la reconstruire.

Mettre à jour

generator-rn-toolboxest obsolète. Utilisez plutôt react-native-make .

ancienne réponse

Je recommande Generator-rn-toolbox pour appliquer l'écran de lancement ou l'icône principale à l'aide de react-native. Il est plus simple et plus facile à utiliser via cli en tant que react-native.

• Vous n'avez pas besoin d'ouvrir XCode.
• Vous n'avez pas besoin de créer beaucoup de fichiers image pour différentes résolutions.
• À tout moment, changez l'écran de lancement en utilisant une ligne de recommandation.

Exigences

• nœud> = 6
• Une image carrée ou un fichier psd avec une résolution de plus de 2208x2208 px pour un écran de lancement (écran de démarrage)
• Esprit positif ;)

Installer

1. Installez générateur-rn-toolbox et yo
2. npm install -g yo generator-rn-toolbox
3. Installez imagemagick brew install imagemagick

4. Appliquer l'écran de démarrage sur iOS

   yo rn-toolbox:assets --splash YOURIMAGE.png --ios

   ou Android

   yo rn-toolbox:assets --splash YOURIMAGE.png --android

C'est tout. :)

La source

Je viens de traverser cela et fonctionne un régal. Le seul barrage que j'ai découvert était de ne pas effacer le contenu du simulateur. Si vous constatez que votre nouvel écran de lancement ne fonctionne pas, vous devez ouvrir la simulation et passer à ce qui suit:

Simulateur> Réinitialiser le contenu et les paramètres

Il doit y avoir une mise en cache hardcore dans ce simulateur, mais une fois que cela a été fait, relancez et vous verrez l'application. Assurez-vous de le faire pour les simulateurs xcode et les simulateurs natifs de réaction!

Assurez-vous que la sélection 'Launch Screen File' est vide:

Suivez ce lien:

Si vous souhaitez ajouter un écran de démarrage à mon application React Native, suivez le processus, le résultat sera le vôtre.

ÉTAPE: 1 J'ai d'abord créé un dossier splashImageResource et ajouté le fichier launchScreen.xib avec l'image de démarrage.

ÉTAPE: 2 modifiez le code tel qu'il est écrit à l'intérieur de la balise subviews. avec ce code<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

ÉTAPE: 3 Vous devez ouvrir votre application dans Xcode. Voici les étapes à suivre:

a) Allez dans votre dossier de projet

b) Ouvrez le dossier ios

c) Allez dans le fichier qui a .xcodeproj comme extension, dans mon cas c'est splasScreenTutorial.xcodeproj

d) Ouvrez ce fichier dans votre Xcode.

e) Supprimez le fichier launchScreen.xib.

f) Cliquez sur le dossier splashScreenTutorial, puis allez dans la section TARGETS

g) Cliquez sur l'onglet Général dans le coin supérieur gauche de votre Xcode et faites défiler jusqu'à Icônes d'application et Images de lancement

h) Accédez à Lancer la source d'images et cliquez sur Utiliser le catalogue d'actifs. Cliquez sur migrer.

i) Supprimez le texte LaunchScreen du fichier de l'écran de lancement.

j) Revenez au dossier de votre projet et ouvrez le fichier Images.xcassets. Vous devriez voir AppIcon et LaunchImage.

k) Ensuite, cliquez sur LaunchImage, Enfin, faites glisser les images de l'écran de démarrage que vous avez de différentes tailles vers la zone de lancement de l'image.

Faites glisser les images comme ceci.

Tester l'écran de démarrage a) Pour voir les modifications, vous devez supprimer l'application de votre simulateur si vous l'avez exécutée initialement.

b) Pour supprimer l'application, cliquez sur le menu Matériel de votre barre Simulateur et allez à Accueil.

c) Appuyez et maintenez enfoncée l'icône d'application particulière que vous souhaitez supprimer, puis cliquez sur le signe X sur l'icône.

d) Exécutez à nouveau votre application en utilisant React-native run-ios

Vous pouvez voir votre écran de démarrage

Pour moi XCode 10.1et react-native 59.2j'ai dû passer par les étapes supplémentaires après avoir déjà ajouté les images, le storyboard et 1 image universelle.

• Faites un clic droit sur l'image, cliquez Show in Finder, puis éditez votre Contents.jsonfichier
• Ajoutez l'image aux sections 2x et 3x
• Accédez au storyboard de l'écran de lancement, avec le menu "règle"
• Assurez-vous que seules les flèches rouges intérieures sont allumées, pas les flèches rouges extérieures
• Cliquez sur "Marges relatives de la zone de sécurité"

L'image doit maintenant être centrée sur les iPhones de toutes tailles (testé sur Portrait).

Si vous souhaitez utiliser le fichier .xib de l'écran de lancement existant, React Native a initialement configuré, mais avec votre propre logo et couleur d'arrière-plan (et sans le texte par défaut de React Native), vous pouvez suivre les instructions ici: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

Si vous créez un écran de lancement à l'aide de React, vous devez ajouter la même chose dans le fichier LaunchScreen.xib dans iOS Xcode pour que vous puissiez prendre une capture d'écran et l'ajouter en tant qu'image dans Images.xcassets.

Ouvrez LaunchScreen puis ajoutez UIImageView dans la vue à partir de la bibliothèque d'objets à partir du panneau droit dans Xcode.

Ajoutez des contraintes de fin, de début, de bas et de haut à la vue. Comme indiqué ci-dessous -

N'oubliez pas de changer le UIImageView ContentMode en tant que AspectFit afin qu'il ait le même aspect lorsque l'application s'exécute.

Après cela, vous devez ajouter du code dans AppDelegate afin de ne pas obtenir un écran blanc. Le code est -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

Vous pouvez vous référer - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Juste pour ceux qui ont encore des problèmes, il manque une étape de plus dans la réponse acceptée avant de faire fonctionner l'écran de lancement iOS.

Ouvrez Info.plistdans le dossier du projet et supprimez la clé "Nom de base du fichier nib principal". Ensuite, reconstruisez et espérons que le problème est résolu.

En suivant les solutions ci-dessus, mon application restait bloquée sur l'écran de démarrage.J'ai donc suivi les 7 étapes suivantes pour ajouter l'écran de démarrage personnalisé sur iOS.

1. Ouvrez le Xcode et localisez le LaunchScreen.xibfichier dans votre projet (notez que c'est l'écran qui est affiché par défaut dans ios)
2. Pour supprimer / modifier le texte à l'écran, cliquez dessus et effectuez les modifications nécessaires à votre guise.
3. Pour changer la couleur d'arrière-plan, localisez les icônes suivantes dans la barre latérale droite et cliquez sur le petit bouton d'icône tout en haut, quatrième à partir de la gauche (lorsque vous passez la souris, il indiquera "Afficher l'inspecteur d'attributs")

4. Maintenant que vous savez comment changer la couleur d'arrière-plan, ajoutons une image à l'écran de démarrage pour le faire, cliquez sur le bouton suivant et sélectionnez la vue Image dans la liste et faites-la glisser et placez-la où vous le souhaitez sur l'écran de démarrage.

5. Maintenant, nous devons ajouter l'image au Images.xcassetsafin que nous puissions la référencer dans le LaunchScreen.xibpour faire ça Images.xcassets. cliquez sur le +bouton suivi de import, puis ajoutez l'image que vous souhaitez afficher dans l'écran de démarrage. En dessous, AppIconvous verrez le nom de votre fichier image. C'est le nom que nous utiliserons pour référencer dans notreLaunchScreen.xib

6. Maintenant, nous devons faire référence à l'image que nous avons ajoutée dans le LaunchScreen.xibfichier, alors revenez LaunchScreen.xibet cliquez sur le image viewque nous avons ajouté précédemment et dans le coin droit, vous verrez un tas d'options. cliquez sur le premier qui dit imageet sélectionnez l'image que vous avez importée à l'étape 5

7. nettoyez le projet et exécutez react-native run-ioset vous devriez voir les changements.

Vous devez définir la source d'image de l'écran de lancement comme votre ensemble d'images. Supprimez ensuite le fichier LauncScreen.xib. Ensuite, faites une recherche globale dans votre projet et supprimez toutes les références à LaunchScreen.xib (regardez dans tout votre projet. J'utilise l'éditeur de texte sublime donc c'est cmd + shift + f) et cela devrait fonctionner.