Comment implémenter Splash Screen dans React Native Navigation

Réagir à la navigation native

Ce tutoriel vous montrera comment implémenter correctement l'écran de démarrage dans React Native Navigation (RNN) sous Android et iOS.

RNN a une prise en charge intégrée pour Splash Screen sur la plate-forme Android, et nous pourrions utiliser ImageLaunch pour iOS. Par conséquent, il n’est pas nécessaire d’utiliser une bibliothèque supplémentaire d’écrans de garde.

Je pense qu’il est important de savoir à quoi ressembleront les résultats avant d’investir votre temps précieux à lire ce tutoriel. Regarde:

J'utilise générateur-rn-toolbox pour analyser rapidement les actifs pour Android et LaunchImage pour iOS dans cet exemple. Vous n'êtes pas obligé de l'utiliser si vous ne le souhaitez pas. Mais si vous le faites, alors:

  • Installer le générateur-rn-toolbox
  • Préparez l'élément / l'image de l'écran de démarrage (2208x2208 px) et copiez-le dans le répertoire du projet. Dans ce tutoriel, le nom de l'élément est splashscreen.psd.

Android

Générer des ressources Android à l'aide de RN-Toolbox (facultatif)

Exécutez la commande suivante:

$ yo rn-toolbox: assets --splash splashscreen.psd --android

Vous poserez ces questions:

  • Nom du projet: Tapez le nom de votre projet ou indiquez simplement si le nom suggéré est correct.
  • Écraser styles.xml: tapez «n» (no) puis entrez.
  • Écraser couleurs.xml: saisissez «y» (oui), puis entrez (demandez uniquement si colors.xml existe déjà)

Le script va ajouter / modifier les éléments suivants:

  • Ajouter des ressources pouvant être dessinées avec le nom launch_screen.png
  • Ajoutez un nom drawable launch_screen_bitmap.xml. Nous allons utiliser ce fichier comme image de fond de la mise en page de l'écran de démarrage
  • Ajoutez un élément splashBackground dans colors.xml le code de couleur sera la couleur principale

Remarque: vous devez ignorer toute modification du fichier styles.xml si vous écrasez-le accidentellement lors de l'exécution du script.

Cela fera plus de 80% du travail. Passez à l'étape 4 de l'instruction Android.

Instruction Android (4 étapes)

Étape 1 (Sautez si vous utilisez la boîte à outils)
Copiez et écrasez vos propres ressources dans / android / app / src / main / res /.

Étape 2 (Ignorer si vous utilisez la boîte à outils)
Créez un nouveau fichier de mise en page avec le contenu ci-dessous:

Remarques:

  • J'utilise le nom launch_screen_bitmap pour la synchronisation avec l'utilisateur de la boîte à outils. Vous pouvez utiliser un autre nom pour ce fichier si vous le souhaitez.
  • Remplacez @ drawable / launch_screen par le nom de votre actif.

Étape 3

Créez / modifiez votre fichier de couleurs avec la couleur d'arrière-plan de votre écran de démarrage. Cela évitera l’espacement des blancs sur certains appareils.

Remarque: Assurez-vous que vous utilisez un code de couleur hexadécimal au lieu de la valeur par défaut rgba (Merci à crankeye pour le signaler à ce problème).

Étape 4

Modifiez le fichier MainActivity.java en remplaçant la méthode createSplashLayout fournie par RNN.

C’est toutes les étapes pour Android, mais il y a une étape supplémentaire à la fin pour les plates-formes Android et iOS.

iOS

Générer des ressources Android à l'aide de RN-Toolbox (facultatif)

Exécutez la commande suivante:

$ yo-rn-toolbox: assets --splash splashscreen.psd --ios

Vous poserez ces questions:

  • Nom du projet: Tapez le nom de votre projet ou indiquez simplement si le nom suggéré est correct
  • Écraser project.pbxproj: Tapez «y» (oui) puis appuyez sur Entrée
  • Écraser Info.plist: Tapez «y» (oui) puis appuyez sur Entrée

Cela va ajouter / modifier ce qui suit:

  • Créer un nouveau fichier LaunchImage.launchimage contenant des actifs analysés
  • Supprimer la clé UILaunchStoryboardName et sa valeur de Info.plist
  • Ajouter la configuration ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME pour les paramètres de génération Debug et Release

Cela fera toutes les œuvres. Vous n'avez rien d'autre à faire.

Instruction iOS (3 étapes) - Manuel seulement

Étape 1

Ouvrez votre projet Xcode dans /ios/{you-project-nameName.xcodeproj
Dans votre dossier de projet, créez une nouvelle image de lancement dans Images.xcassets.
Ajoutez vos ressources à cette image de lancement.

Exemple d'image de lancement

Étape 2

Supprimez l'écran de démarrage natif de React par défaut en supprimant les paires clé-valeur UILaunchStoryboardName dans Info.plist.

Étape 3

Appliquer l'image de lancement dans l'onglet Général> Icônes d'application et images de lancement
Remplacez Launch Images par le LaunchImage nouvellement créé

Exemple de paramétrage LaunchImage

C’est tout pour iOS, vérifiez l’étape bonus ci-dessous pour Android et iOS.

Étape bonus

Ajoutez animationType: «fade» lorsque vous démarrez l'application avec startTabBasedApp ou startSingleScreenApp pour rendre la transition plus fluide.

Notes de la boîte à outils RN

  • Vous pouvez exécuter la boîte à outils pour générer des actifs à la fois pour Android et iOS en ne spécifiant pas l'indicateur de plate-forme, mais je ne le recommande pas, car il est plus difficile de garder trace des modifications.
  • Il n'est pas nécessaire de conserver le fichier splashscreen.psd après le processus.
  • Les actifs générés peuvent ne pas fonctionner correctement sur toutes les dimensions de périphériques. Il est conseillé de remplacer les éléments de l'écran de démarrage en utilisant les ressources de l'équipe de conception.

La fin

Ceci est mon premier article sur Medium, donc s'il y a une erreur ou un problème, merci de laisser un commentaire.

Le code source de cet exemple peut être trouvé ici. Vous pouvez vérifier le commit pour voir les changements de chaque instruction.

J'espère que ce tutoriel vous aidera à résoudre les problèmes que vous rencontrez lors de la mise en œuvre de RNN Splash Screen :)