Lancer l'écran Storyboard avec l'image centrée iOS
1 - Je souhaite utiliser un LaunchScreen.storyboard dans mon application
2 - Dans cet écran de lancement, je dois insérer une image de marque au centre de l'écran
Quelqu'un pourrait-il m'aider?
J? ai compris!
Voici un lien avec les images des étapes:
1 - Définissez le fichier de lancement dans l'onglet> Général
2 - Sélectionnez LaunchScreen.storyboard dans le navigateur de projet, cochez l'option "Utiliser comme écran de lancement" dans l'inspecteur de fichiers
3 - Faites glisser et déposez une ImageView dans la scène du contrôleur de vues
4 - Sélectionnez l'ImageView ajoutée avant, changez sa largeur et sa hauteur. Je mets l x h 200
Tout d'abord, cochez la case et après avoir changé la valeur de la taille
Cliquez sur le bouton "Ajouter 2 contraintes"
5 - Avec ImageView sélectionné, changez de position pour la centraliser.
Tout d'abord, cochez la case et après avoir changé la valeur de la taille
Cliquez sur le bouton "Ajouter 2 contraintes"
6 - C'est presque fini !!!
Maintenant, résolvons les problèmes de mise en page automatique, cliquez sur le bouton "Résoudre les problèmes de mise en page automatique" et mettez à jour les cadres
7 - Il est temps de choisir notre image
Avec ImageView sélectionné, allez dans> onglet Inspecteur des attributs et choisissez l'image que vous voulez, rappelez-vous de supprimer son extension (c'est l'astuce, car l'image peut apparaître lors de la création de l'application sur un appareil réel, c'est arrivé avec moi !!!).
8 - Donc, CMD + R pour construire et exécuter votre application. Voilá !!!!!
Malheureusement, la réponse de @Jhonsore n'a pas fonctionné pour moi.
Voici ce que j'ai fait pour le faire fonctionner:
! Remarque Cela fonctionne également pour les fichiers .xib, qui est fourni avec React Native init
Ajout du fichier image
1) Sous image.xcassets, cliquez avec le bouton droit et choisissez Nouvel ensemble d'images . Créez trois tailles différentes de votre image (@ 1x, @ 2x, @ 3x) et ajoutez les images en les faisant glisser dans les emplacements pour 1x, 2x, 3x. Pour 3x, je suggère une taille de plus de 1200 px.
2) Nommez le nouveau jeu d'images, par exemple: splash
Création de l'écran de lancement
1) Cliquez avec le bouton droit sur votre projet, cliquez sur Nouveau fichier ... et ajoutez un écran de lancement.
2) Sélectionnez votre projet et sous Général-> Icônes d'application et images de lancement-> Lancer le fichier d'écran sélectionnez votre écran de lancement nouvellement créé
3) Ouvrez l'écran de lancement
4) Sélectionnez Voir la scène du contrôleur-> Voir le contrôleur
5) Dans le panneau de droite, choisissez Mesures simulées-> Taille et modifiez vers Feuille de page
6) Dans le panneau de gauche, supprimez les deux entrées de texte (copyright et nom du projet)
7) Ajoutez une vue d'image en cliquant sur le bouton montré dans la capture d'écran ci-dessous et en le faisant glisser vers le centre de la vue
8) Dans le panneau de droite avec la vue Image sélectionnée, choisissez Vue-> Mode Contenu-> Ajustement de l'aspect . Ajoutez également votre image en choisissant ** Image View-> Image
10) Allez à Inspecteur de taille (icône de la règle, voir capture d'écran) et choisissez une largeur et une hauteur qui semblent bonnes (cela s'adaptera à d'autres tailles d'écran).
11) Faites glisser votre image au centre de l'écran jusqu'à ce que vous voyiez à la fois une ligne bleue horizontale et verticale
12) Enfin, sous Redimensionnement automatique changez la fenêtre avec les flèches, donc cela ressemble à la capture d'écran ci-dessus. Toutes les flèches extérieures doivent être désélectionnées et toutes les flèches intérieures sélectionnées.
Résultat
Dépannage: Si vos images ne s'affichent pas sur le simulateur, essayez de le redémarrer ou essayez de sélectionner un autre appareil.
Crédits image bus: Eliott Van Buggenhout