iOS sur l'écran de Lancement de Réagir Natif
Je travaille avec une Réagir application Native et je suis en train de définir un personnaliser l'écran de lancement, mais je ne suis pas en mesure de.
Réagir Natif crée un LaunchScreen.xib par défaut, j'ai donc créé un LaunchImage à l'intérieur des Images.xcassets:
J'ai aussi lu que j'ai pour modifier le "Écran de Lancement de Fichier" de la section "Icônes d'Application et de Lancer des" Images " dans mes options:
Une fois que je l'ai fait, mon écran devient totalement noir, et lorsque l'application est chargée, il existe à la fois en haut et en bas des images noires:
Donc je ne sais pas ce que je dois faire pour régler mon écran de lancement dans mon Réagir Natif de projet.
Je serai reconnaissant si quelqu'un peut m'aider à sortir de ces ennuis.
Merci d'avance.
- Pourquoi l'Écran de Lancement de Fichier vide dans votre deuxième capture d'écran?
- Car j'ai lu que je dois le laisser vide si je veux l'application utilise les images dans le répertoire actif
- OK, vous avez raison. Pour obtenir une meilleure compréhension: Est-ce que le texte du cadre noir au dessus de vous ou de réagir?
- C'est à partir de Réagir. Au premier abord, un écran noir est affiché (ce qui serait l'écran de lancement), après que le texte que je montre dans la capture d'écran, et après le texte de mon application s'affiche. Ce texte est également paru avant, quand mon application a le défaut de Réagir Native sur l'écran de lancement.
- désinstallation de l'appareil, nettoyez le projet et d'essayer de l'installer à nouveau
- attendez, vous devriez également vous cliquez sur "Utiliser l'actif du Catalogue" et choisissez votre LaunchImage
- Merci pour votre réponse. Si je clique sur "Utiliser l'Actif du catalogue" je ne peux pas sélectionner "LaunchImage" -> puu.sh/lGuc2/8e21ba0967.png j'ai aussi essayé de le désinstaller à partir de l'appareil, nettoyer et installer à nouveau, mais il ne fonctionne pas non plus.
- Comment pouvons réaliser la création de l'écran de démarrage pour le projet créé avec "créer-réagir-native-app" ?
Vous devez vous connecter pour publier un commentaire.
J'ai été capable de résoudre le problème, avec l'aide de ce fil: Lancement de l'Image ne s'affiche pas dans l'application iOS (à l'aide d'Images.xcassets)
Donc, je vais l'expliquer en profondeur dans cas, on peut aider quelqu'un d'autre.
Première, vous avez besoin de créer un certain nombre d'images. Ce que j'ai utilisé pour ce modèle et cette page web avec un générateur automatique: TiCons
Quand j'ai téléchargé mes images, j'ai pris celles à l'intérieur des actifs/iphone dossier, je n'ai pris que ceux-là:
Aussi vous avez besoin de ce Contenu.json fichier dans le même dossier, je l'ai eu d'un ami:
Donc, à ce stade, j'ai créé un dossier appelé LaunchImage.launchimage à l'intérieur de Images.xcassets dossier dans mon Réagir Natif de projet et d'enregistrer les images et le Contenu.json fichier à l'intérieur:
Deuxième, vous devez ouvrir votre projet dans Xcode et dans "paramètres Généraux", en dessous de "les icônes d'Application et de Lancer des Images" nous devons laisser l'option "l'Écran de Lancement de Fichier" vide (on peut aussi supprimer le LaunchScreen.xib fichier à l'intérieur de notre projet), et cliquez sur "Utilisation de l'Actif Catalogue" après que. Modale s'ouvre, nous choisissons de Migrer le catalogue Images
Maintenant, dans le "Lancement des Images Source" sélecteur, on peut choisir le dossier que nous avons créé avant, LaunchImage (l'un avec nos images):
- Nous prendre cela au lieu de les Actifs de la Marque et nous pouvons supprimer les Actifs de la Marque dossier.
À ce stade, nous allons être en mesure d'exécuter notre Réagir application Native avec notre coutume de lancer des images:
Je sais que cela semble un peu complexe pour un soi-disant facile, mais après avoir lu beaucoup sur le sujet c'était le seul moyen que j'ai pu obtenir mon image splash de travail, donc je voulais la partager avec la communauté.
content.json
partie, vous pouvez aller àImages.xassets
clic droit dans la zone vide et sélectionnezNew App Icons & Launch Images
, il va générer le fichier json pour vous.Assurez-vous de supprimer l'application dans le simulateur.
Puis faire un nettoyage de votre projet.
Je recommande générateur-rn-boîte à outils pour l'application de l'écran de lancement ou de l'icône principal à l'aide de réagir sur-natif. Il est plus simple et facile à utiliser grâce à la cli de réagir indigènes.
Exigences
Installer
npm install -g yo generator-rn-toolbox
brew install imagemagick
Appliquer de 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
generator-rn-toolbox
actualité fait tout ce que l'on a accepté la réponse ne.J'ai été à la recherche à ces réponses beaucoup dans des solutions contenant de la façon de créer un nouvel écran de lancement. Je veux dire, nous allons réfléchir à ce sujet pendant une minute.
Lorsque nous créons un nouveau réagir indigènes projet que voit-on pour la
l'écran de lancement?
Donc, qui m'a fait penser, Comment ont-ils de le faire?
Je pense qu'il doit y avoir une raison pour cela. Je suis donc allé dans le
LaunchScreen.xib
et a modifié le texte par défaut "Réagir Natif..." ou ce que jamais il a dit. J'ai couru à l'application une fois de plus de voir que l'écran de lancement reflète mes modifications.Solution 1
Modifier le LaunchScreen.xib
Solution 2
Créer mon propre
Donc je l'ai fait, il m'a fallu plus de temps pour ce type de réponses que d'apprendre à créer mes propres.
Both of these solutions are compatible with all the devices.
Supprimer
LaunchScreen.xib
cliquez sur
images.xcassets
faites un clic droit dans l'espace blanc
cliquez sur
**import**
puis sélectionnez l'image que vous souhaitez ajouter.Clic droit sur votre dossier racine du projet et ajouter un nouveau fichier de type
Launch Screen
et nommez-ce que jamais vous le souhaitez.Cliquez sur votre projet dans le menu de navigation de gauche, allez à la
Settings
>General
et sousApp Icons and Launch Images
. Assurez-vous queLaunch Image Source
est vide et leLaunch Screen File
est le même nom que vous venez de créer sur l'écran de lancement.Cliquez sur votre nouveau fichier que vous avez créé dans
step 2
, faites glisser uneImage View
ou de modifier la façon dont jamais il vous plaît.Alors ça y est, vous avez terminé. Vous n'avez même pas besoin de nettoyer la solution, il suffit de reconstruire.
LaunchImage
oulaunchscreen.xib
j'ai essayé d'utiliser le storyboard, mais ensuite je ne sais pas comment le faire disparaître (je peux faireSplashScreen.hide()
si Im en utilisant LaunchImage) mais vous ne savez pas comment faire cela danslaunchscreen.xib
launchscreen.xib
vous pouvez configurer les propriétés d'unUIimageView
à prendre la totalité de l'écran pour la première image. Puis empiler un autreUIimageView
sur le dessus de celui-là. Si cela ne répond pas à votre question, pouvez-vous s'il vous plaît poster une nouvelle question et je peux essayer de répondre là? Merci.Juste allé à travers ce et fonctionne un régal. Le seul bloc de route, j'ai découvert n'était pas de compensation le simulateur de contenu. Si vous trouvez que votre nouvel écran de démarrage ne fonctionne pas, vous devez ouvrir la simulation et aller à la suivante:
Simulator > Réinitialiser le contenu et les paramètres
Il doit y avoir certains hardcore de mise en cache d'aller à l'intérieur de ce simulateur, mais une fois que cela a été fait relancer et vous verrez l'application. Assurez-vous que vous faites cela pour les deux xcode et des simulateurs de réagir natif de simulateurs!
Assurez-vous que le 'l'Écran de Lancement de Fichier", sélectionnez " est vide:
Suivez ce lien:
Si vous souhaitez ajouter un écran d'accueil à mon Réagir application Native.Suivez le processus, le résultat sera tout à toi.
ÉTAPE:1
Tout d'abord,j'ai créé un splashImageResource dossier et a ajouté l'launchScreen.xib fichier avec l'image splash.
ÉTAPE:2
modifiez le code comme il est écrit à l'intérieur de la sous-vues de la balise. avec ce code
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z">
</imageView>
</subviews>
ÉTAPE:3
Vous devriez ouvrir votre application dans Xcode. Voici les étapes à suivre:
a) Allez dans votre dossier de projet
b) Ouvrez le ios dossier
c) ouvrez le fichier .xcodeproj comme l'extension, dans mon cas, c'est splasScreenTutorial.xcodeproj
d) Ouvrir ce fichier dans votre Xcode.
e) Supprimer la launchScreen.xib fichier.
f) Cliquez sur le splashScreenTutorial dossier, puis passez à la section CIBLES
g) Cliquez sur l'Onglet Général sur le coin en haut à gauche de votre Xcode et faites défiler les Icônes d'Application et de Lancer des Images
h) Lancez les Images Source et cliquez sur Utiliser les Actifs de Catalogue. Cliquez sur migrer.
i) Supprimer le texte LaunchScreen à partir de l'Écran de Lancement de Fichier.
j) retournez à votre dossier de projet et d'ouvrir les Images.xcassets fichier. Vous devriez voir AppIcon et LaunchImage.
k) Ensuite, cliquez sur le LaunchImage, Enfin, faites glisser l'écran de démarrage images que vous avez de tailles différentes à l'Image de Lancement de la boîte.
Faites glisser les images de ce genre.
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 initialement.
b) Pour supprimer l'application, cliquez sur le menu Matériel sur votre Simulateur de bar et aller à la Maison.
c) Appuyez et maintenez enfoncé le particulier icône de l'application que vous souhaitez supprimer, puis cliquez sur le signe X sur l'icône.
d) Exécuter votre application à l'aide de réagir-exécution natif ios
Vous pouvez voir votre Écran de démarrage
Si vous souhaitez utiliser l'existant sur l'Écran de Lancement .xib fichier Réagir Natif a d'abord mis en place, mais avec votre propre logo et la couleur d'arrière-plan (sans Réagir Natif de texte par défaut), 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 avec l'aide de Réagir, alors vous devriez ajouter la même chose dans le LaunchScreen.xib fichier dans iOS Xcode pour cela, vous pouvez prendre une Capture d'écran et l'ajouter comme une Image dans les Images.xcassets.
Ouvrir LaunchScreen puis ajouter UIImageView dans la Vue à partir de la Bibliothèque d'Objets à partir de Panneau de Droite dans Xcode.
Ajouter en fin de chaîne, Conduisant, en Haut et en Bas des Contraintes à la Vue.
Comme Indiqué Ci-Dessous -
Ne pas Oublier de changer le UIImageView ContentMode comme AspectFit de sorte qu'il semblera même lorsque l'application s'exécute.
Après cela, vous devez ajouter du code dans AppDelegate de sorte que vous n'obtenez pas un écran blanc.
Le code est -
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 de la difficulté, il y a une étape de plus manquant à partir de la accepté de répondre avant de faire l'iOS de Lancement de l'écran de travail.
Ouvrir
Info.plist
dans le dossier du projet et de supprimer les "Principaux plume nom de base du fichier de la clé". Ensuite, reconstruire et j'espère que le problème a disparu.Pour moi sur
XCode 10.1
etreact-native 59.2
j'ai dû passer par les étapes supplémentaires après déjà de l'ajout des images, storyboard et 1 image universelle.Show in Finder
, puis modifiez votreContents.json
fichierImage devrait maintenant être centré sur l'ensemble de la taille de l'iphone (testé sur le Portrait).
De suivre les solutions ci-dessus mon application a été coincé sur l'Écran de démarrage, donc j'ai fait les 7 étapes suivantes pour ajouter la coutume de l'écran de démarrage sur ios.
LaunchScreen.xib
fichier dans votre projet (Remarquez que c'est l'écran qui est affiché par défaut dans ios)Maintenant, nous devons ajouter l'image à la
Images.xcassets
afin que nous puissions y faire référence dans leLaunchScreen.xib
à faire que gotoImages.xcassets
. cliquez sur+
bouton suivie parimport
puis ajouter l'image que vous souhaitez afficher dans l'écran de démarrage. SousAppIcon
vous verrez votre nom de fichier d'image. C'est le nom que nous allons utiliser pour faire référence à notreLaunchScreen.xib
Maintenant, nous avons de référence de l'image que nous avons ajouté dans le
LaunchScreen.xib
fichier afin de revenir àLaunchScreen.xib
et cliquez sur leimage view
que nous avons ajouté plus tôt et sur la droite vous verrez des tas d'options. cliquez sur le premier qui ditimage
et sélectionnez l'image que vous avez importé dans l'étape 5react-native run-ios
et vous devriez voir les changements.Vous devez définir l'écran de lancement de l'image de la source de votre image. Par la suite supprimer le LauncScreen.xib fichier. Ensuite, faire une recherche globale dans votre projet et de supprimer toutes les références à LaunchScreen.xib (regarder dans l'ensemble de votre projet. J'ai de l'utilisateur sublime éditeur de texte, donc c'est cmd+maj+f) et cela devrait fonctionner.