Écran de lancement iOS dans React Native

Question

Je travaille avec une application native React et j'essaie de définir un écran de lancement personnalisé, mais je n'y parviens pas.

React Native crée par défaut LaunchScreen.xib. J'ai donc créé une LaunchImage dans Images.xcassets:

J'ai également lu que je devais modifier le "Fichier d'é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.

Answer 1

J'ai pu résoudre le problème à l'aide de ce fil de discussion: l'image de lancement n'apparaît pas dans l'application iOS (à l'aide de Images.xcassets)

Donc, je vais l'expliquer au cas où cela 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 du dossier assets/iphone, mais uniquement celles-ci:

• [email protected] (640x960)
• [email protected] (640x1136)
• [email protected] (750x1334)
• [email protected] (1242x2208)
• [email protected] (2208x1242)

Vous avez aussi besoin de ce fichier Contents.json dans le même dossier, je l'ai reçu d'un ami:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "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 à l'intérieur Images.xcassets dossier dans mon React Native Project et enregistrez les images et le fichier Contents.json qu'il contient:

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

Maintenant, dans le sélecteur " Lancer Images Source ", nous pouvons choisir le dossier créé précédemment, LaunchImage (celui avec nos images):

Nous sélectionnons ceci au lieu de actifs de marque et nous pouvons supprimer le dossier actifs de marque .

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

Je sais que cela semble un peu complexe pour une tâche supposément facile, mais après avoir lu beaucoup de choses à ce sujet, c’était le seul moyen de faire fonctionner mes images splash. C’est pourquoi je voulais partager avec la communauté.

Answer 2

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

Answer 3

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 facile à utiliser via cli comme 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.

Exigences

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

Installer

1. Installer le 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. :)

Source

Answer 4

J'ai beaucoup regardé ces réponses dans SO contenant des solutions pour 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 voit-on pour l'écran de lancement?

> écran de lancement par défaut de Facebook

Alors ça m'a fait penser, comment l'ont-ils fait?

Ils ont créé un _LaunchScreen.xib_

Je pense qu'il doit y avoir une raison à cela. Alors je suis allé dans le _LaunchScreen.xib_ et 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 fichier existant LaunchScreen.xib

Solution 2 Créer mon propre

J'ai donc mis plus de temps à 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 _images.xcassets_ faites un clic droit dans l'espace blanc, cliquez sur _**import**_, puis sélectionnez l'image que vous souhaitez ajouter.

étape 3:

Cliquez avec le bouton droit sur le dossier racine de votre projet et ajoutez un nouveau fichier de type _Launch Screen_ et nommez-le comme vous le souhaitez.

étape 4

Cliquez sur votre projet dans le navigateur de gauche, allez à Settings> General et sous _App Icons and Launch Images_. Assurez-vous que _Launch Image Source_ est vide et que _Launch Screen File_ correspond au même nom que votre nouvel écran de lancement.

étape 5

Cliquez sur votre nouveau fichier créé dans _step 2_, faites glisser un _Image View_ ou modifiez-le à votre guise.

Alors ça y est, vous avez terminé. Vous n'avez même pas besoin de nettoyer la solution, il vous suffit de reconstruire.

Answer 5

Je viens de traverser cela et travaille un régal. Le seul obstacle que j'ai découvert n'était pas la suppression du contenu du simulateur. Si vous constatez que votre nouvel écran de lancement ne fonctionne pas, vous devez ouvrir la simulation et procéder comme suit:

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

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

Answer 6

Assurez-vous que la sélection "Lancer le fichier d'écran" est vide:

Answer 7

suivez ce lien:

Si vous souhaitez ajouter un écran de démarrage à mon React application native. Suivez le processus, le résultat sera tout à vous.

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

ÉTAPE: 2 changez 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 le dossier de votre projet

b) Ouvrez le dossier ios

c) Allez dans le fichier qui a l'extension .xcodeproj, 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 à la section CIBLES.

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) Allez dans Launch Images Source et cliquez sur Utiliser le catalogue d'actifs. Cliquez sur migrer.

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

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

k) Cliquez ensuite sur LaunchImage. Enfin, faites glisser les images de l'écran de démarrage de tailles différentes dans la zone Lancer une image.

Faites glisser les images comme ceci.

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

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

c) Appuyez sur l'icône de l'application que vous souhaitez supprimer et maintenez-la enfoncée, puis cliquez sur le signe X de l'icône.

d) Exécutez à nouveau votre application à l'aide de run-ios réactif

Vous pouvez voir votre écran de démarrage

Answer 8

Après avoir suivi les solutions ci-dessus, mon application était 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 fichier LaunchScreen.xib dans votre projet (notez qu'il s'agit de l'écran 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 de l’arrière-plan, localisez les icônes suivantes dans la barre latérale droite et cliquez sur le petit bouton en haut à droite, le quatrième en partant de la gauche (lorsque vous survolez, le message "Afficher l’Inspecteur des attributs") est affiché.

4. Maintenant que vous savez comment changer la couleur d'arrière-plan, ajoutons une image à l'écran de démarrage. Pour cela, cliquez sur le bouton ci-dessous, sélectionnez la vue Image dans la liste, faites-la glisser à l'emplacement de votre choix sur l'écran de démarrage.

5. Nous devons maintenant ajouter l’image au Images.xcassets afin de pouvoir la référencer dans le LaunchScreen.xib pour le faire aller à Images.xcassets. cliquez sur le bouton + suivi de import, puis ajoutez l'image que vous souhaitez afficher dans l'écran de démarrage. Sous AppIcon, vous verrez le nom de votre fichier image. C’est le nom que nous utiliserons comme référence dans notre LaunchScreen.xib

6. Maintenant, nous devons référencer l'image que nous avons ajoutée dans le fichier LaunchScreen.xib, alors revenez à LaunchScreen.xib et cliquez sur le image view que nous avons ajouté plus tôt. Vous verrez un tas d'options dans le coin droit. . cliquez sur le premier qui indique image et sélectionnez l'image que vous avez importée à l'étape 5

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

Answer 9

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

Answer 10

Pour moi sur XCode 10.1 et react-native 59.2 je devais passer par les étapes supplémentaires après déjà ajouter les images, le storyboard et 1 universel image.

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

L'image doit maintenant être centrée sur tous les iPhones (testés sur Portrait).

Answer 11

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

Ouvrez LaunchScreen, puis ajoutez UIImageView dans la vue depuis la bibliothèque d'objets à partir du panneau de droite 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 soit identique lors de l'exécution de l'application.

Après cela, vous devez ajouter du code dans AppDelegate pour ne pas avoir d'é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 consulter - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Answer 12

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

Ouvrez Info.plist dans le dossier du projet et supprimez la clé "Nom de base du fichier de base". Ensuite, reconstruisez et si tout va bien le problème est parti.