écran de Lancement de iOS dans React Native

Question

écran de Lancement de iOS dans React Native

je travaille avec une application Native de React et j'essaie de configurer un écran de lancement personnalisé mais je ne suis pas en mesure de le faire.

React Native crée un écran de lancement.xib par défaut, j'ai donc créé un LaunchImage à l'intérieur des Images.xcassets:

LaunchImage in Images.xcassets

j'ai également lu que je dois modifier le "fichier écran de lancement" sous "icônes de L'application et des Images de lancement" dans mes options:

Launch Images options

une fois que j'ai fait cela, mon écran de lancement est devenu totalement noir et lorsque l'application est chargée, il ya à la fois haut et bas des cadres noirs:

enter image description here

donc je ne sais pas ce que je dois faire pour mettre mon écran de lancement dans mon projet natif React.

je vous serais reconnaissant si quelqu'un peut m'aider avec ces problèmes.

Merci d'avance.

85

asset-catalog ios react-native xcode

demandé sur Tamás Sengel 2015-12-01 21:15:29

11 réponses

score 106 · Answer 1

j'ai été en mesure de résoudre le problème, avec l'aide de ce fil: image de Lancement ne pas apparaître dans l'application iOS (en utilisant des Images.xcassets)

donc je vais l'expliquer en profondeur au cas où il pourrait aider quelqu'un d'autre.

premier , 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 qui étaient dans le dossier des actifs/iphone, je n'ai pris que celles-ci:

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

vous avez aussi besoin de ce contenu .json fichier dans le même dossier, je l'ai eu 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 point j'ai créé un dossier appelé LaunchImage.launchimage à l'intérieur des Images.xcassets dossier dans mon React Native project et enregistrer les images et le contenu .json fichier à l'intérieur de lui:

Second , vous devez ouvrir votre projet dans Xcode et dans les paramètres "généraux", ci-dessous " icônes App et images de lancement "nous devons laisser l'option " fichier écran de lancement " vide (nous pouvons également supprimer le LaunchScreen.xib fichier à l'intérieur de notre projet), et cliquez dans " utiliser le catalogue D'actifs " après cela. Un modal va s'ouvrir, Nous choisissons de migrer le catalogue Images

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

nous choisissons ceci au lieu de biens de marque et nous pouvons supprimer biens de marque dossier.

à ce stade, nous serons en mesure d'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 que j'ai pu obtenir mes images de splash de travail, donc je voulais partager avec la communauté.

score 11 · Answer 2

assurez-vous de supprimer l'application du simulateur. Alors faites un nettoyage sur votre projet.

score 6 · Answer 3

j'ai beaucoup regardé ces réponses dans donc contenant des solutions pour la création d'un nouvel écran de lancement. Je veux dire, nous allons réfléchir à ce sujet pendant une minute.

quand nous créons un nouveau projet react-native que voyons-nous pour le l'écran de lancement?

> écran de lancement par défaut de Facebook

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

ils ont créé un LaunchScreen.xib

je pense qu'il doit y avoir une raison pour cela. Je suis donc allé dans le LaunchScreen.xib et ai fait un changement au texte par défaut" React Native..."ou ce que jamais il a dit. J'ai lancé l'application Une fois de plus pour voir que l'écran de lancement reflétait mes modifications.

Solution 1 Modifiez l'écran de lancement existant.xib

Solution 2 créer mon propre

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 images.xcassets clic droit dans l'espace blanc cliquez sur **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 Screen et nommez-le ce que vous voulez.

étape 4

cliquez sur votre projet dans la nav de gauche, passez à Settings > General et sous App Icons and Launch Images . Assurez-vous que Launch Image Source est vide et que Launch Screen File est le même nom que votre écran de lancement nouvellement créé.

étape 5

cliquez sur votre nouvelle marque fichier que vous avez créé dans step 2 , faites glisser un Image View ou éditez comme vous voulez.

alors, c'est fini. Tu n'as même pas besoin de nettoyer la solution, juste de reconstruire.

score 6 · Answer 4

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 à travers cli comme react-native.

il n'est pas nécessaire d'ouvrir XCode.
N'ont pas besoin de faire beaucoup de fichiers d'image pour diverses résolutions.
changez à tout moment l'écran de lancement en utilisant une mention élogieuse.

exigences

noeud >= 6
Un carré image ou le fichier psd avec une taille de plus que 2208x2208 px résolution pour un écran de démarrage(splash screen)
d'esprit Positif ;)

Installer

Installer le générateur-rn-boîte à outils et yo
npm install -g yo generator-rn-toolbox
installer imagemagick 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

score 4 · Answer 5

vient de passer par CE et fonctionne un plaisir. Le seul obstacle que j'ai découvert n'était pas le nettoyage du contenu du simulateur. Si vous constatez que votre nouvel écran de lancement ne fonctionne pas, vous devez ouvrir la simulation et aller à la page suivante:

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 c'est fait - relancez et vous verrez l'application. Assurez-vous de le faire pour les deux xcode simulateurs et simulateurs de réaction-natifs!

score 4 · Answer 6

assurez-vous que la sélection "lancer le fichier écran" est vide:

4

répondu PoseLab 2017-06-08 08:04:52

score 1 · Answer 7

suivez ce lien:

si vous voulez ajouter un écran splash à mon application natif React.Suivez le processus, le résultat sera tout à toi.

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

étape: 2 modifier le code tel qu'il est écrit dans 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 devriez ouvrir votre application dans Xcode. Voici les étapes à suivre:

a) allez dans votre dossier de projet

B) ouvrir le dossier iOS

c) allez au fichier qui A.xcodeproj comme l'extension, dans mon cas c'est splasscreentutal.xcodeproj

d) ouvrez ce fichier dans votre Xcode.

e) Supprimer la launchScreen.fichier xib.

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

G) cliquez sur L'onglet Général dans le coin supérieur gauche de votre Xcode et faites défiler vers le bas jusqu'aux icônes de L'application et lancez les Images

h) allez au lancement D'Images Source et cliquez sur Utiliser Le Catalogue de ressources. Cliquez sur la migration.

i)Supprimer L'écran de lancement du texte.

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

k) ensuite, cliquez sur le lancer, enfin, faites glisser les images de l'écran de projection que vous avez de différentes tailles à la boîte D'Image de lancement.

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 ont lancé l'application initialement.

b) pour supprimer l'application, cliquez sur le menu Matériel de votre barre de simulateur et allez à la maison.

c) Touchez et maintenez enfoncée l'icône de l'application que vous voulez supprimer, et cliquez sur le signe X sur l'icône.

d) Lancez à nouveau votre application en utilisant react-native run-ios

vous pouvez voir votre écran de projection

score 0 · Answer 8

si vous souhaitez utiliser l'écran de lancement existant .le fichier XIB React Native a d'abord été configuré, mais avec votre propre logo et la couleur de fond (et sans aucun des textes par défaut de React Native), vous pouvez suivre les instructions ici: https://medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

score 0 · Answer 9

si vous créez un écran de lancement avec L'aide de React alors vous devez ajouter la même chose dans l'écran de lancement.XIB fichier dans iOS Xcode pour que 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'objet à partir du panneau droit dans Xcode.

ajouter traîneau, tête, bas et haut Les contraintes à la Vue. Comme Indiqué Ci - Dessous -

n'oubliez pas de changer le mode UIImageView ContentMode en AspectFit afin qu'il ressemble même quand l'application tourne.

après cela, vous devez ajouter du code dans AppDelegate afin de 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 Vous Référer à https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

score 0 · Answer 10

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 d'iOS.

ouvrir Info.plist dans le dossier du projet et supprimer la touche" nom de base du fichier NIB principal". Ensuite, reconstruire et j'espère que le problème a disparu.

score -5 · Answer 11

vous devez définir la source de l'image de l'écran de lancement comme votre jeu d'image. Ensuite, supprimez le LauncScreen.fichier 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 ça devrait marcher.

Las etiquetas más populares

écran de Lancement de iOS dans React Native

11 réponses

exigences

Installer