Comment configurer facilement les icônes de lancement dans React Native - Android & iOS

Image 1: Image abstraite des icônes de lancement des applications mobiles

Icône de lancement! Une tâche simple, qui peut devenir un problème / défi difficile si nous ne savons pas exactement quoi faire. Ce que nous devons implémenter ici est un processus en deux étapes pour chacune des plates-formes natives:

  1. Préparez des icônes de lancement aux dimensions appropriées pour toutes les tailles d'écran possibles (par exemple, iPhone SE, iPhone 7, iPhone X, etc.)
  2. Placez-les dans le dossier de l'application native et remplacez ceux par défaut existants.

Et bien sûr, répétez les deux étapes pour la plate-forme native restante (c'est-à-dire Android)

Mais bon, s’il s’agit de votre première application React Native et que vous venez comme un développeur Web, comme vous l’avez fait, vous ne connaissez pas les détails mentionnés ci-dessus; du moins pas encore.

J'ai donc commencé à chercher un moyen d'implémenter cela rapidement et facilement pour les deux plates-formes (iOS, Android) au lieu d'avoir à trouver tous les détails. Heureusement, j'ai trouvé le chemin: D

RN toolbox à la rescousse

Il existe un jeu d’outils pour React Native, appelé RN toolbox. C'est un ensemble de générateurs Yeoman qui peuvent aider au démarrage du projet.

Nous allons l'installer et l'utiliser pour redimensionner et placer toutes les icônes nécessaires pour nous! Le redimensionnement de l'image est réalisé à l'aide de l'outil ImageMagick, nous devons donc également l'installer. Commençons!

Installer les outils

Pour utiliser la boîte à outils RN, il faut qu'un minimum de nœud 6 soit déjà installé.

Ensuite, nous l’installons avec npm globalement comme indiqué ci-dessous:

npm installer -g yo generateur-rn-toolbox

Pour ImageMagick maintenant, les étapes d’installation diffèrent d’une plate-forme à l’autre et se trouvent toutes dans la section de téléchargement du site Web.

Utilisez les outils!

  • Préparez un fichier d’icône unique de 200x200px. Si vous n'en avez pas, utilisez simplement l'exemple ci-dessous:
Image 2: Exemple de logo png Reag icon of 200x200px
  • Accédez au dossier racine de votre application React Native et exécutez la commande suivante:
yo-rn-toolbox: assets --icon 

Vous serez invité à entrer le nom de votre projet React Native, mais vous pouvez simplement appuyer sur Entrée car il est détecté automatiquement. Faites attention ici pour fournir le nom correct car il est nécessaire pour l'application iOS et pour que les icônes soient correctement placées dans les chemins appropriés. Par exemple, si vous avez créé votre projet avec MyReactNativeProject, initi-réactif, votre nom de projet est MyReactNativeProject.

Et si on vous demande d'écraser le fichier Contents.json, répondez avec Y.

Et c'est tout! Toutes les icônes Android et iOS ont été créées et placées dans les chemins de projets natifs appropriés! Et ce qui est génial ici, c’est que nous pouvons maintenant identifier toutes les tailles d’icônes et les chemins appropriés au cas où nous voudrions changer / redimensionner manuellement une ou plusieurs d’entre elles.

Voyons un exemple:

Image 3: Exécution de la commande rn-toolbox avec un exemple de nom d'icône react-logo.png

Dans l'exemple ci-dessous, nous avons fourni à icon de lancement l'exemple d'image 1 ci-dessus, appelé réact-logo.png. Le nom de projet exemple est MyReactNativeProject. Dans votre cas, ce dernier doit être le nom réel du projet.

Comme vous pouvez le voir sur la sortie de la console, l'outil a redimensionné, généré et placé les nouvelles images d'icône de lancement dans les dossiers respectifs des projets natifs. Et afin de vérifier si tel est bien le cas, examinons les modifications détectées par Git.

Image 4: Modifications apportées au projet après l'exécution de la commande rn-toolbox

Et oui! Les modifications sont visibles et l’icône Android par défaut a déjà été remplacée par celle fournie. Je vérifie généralement tous les fichiers ajoutés / modifiés ci-dessus, juste pour m'assurer que tout fonctionne correctement, puis effectuez quelques tests sur les émulateurs / périphériques pour vérifier que l'icône de lancement fonctionne correctement.

Image 5: Exemple d'application avec les icônes de lancement récemment ajoutées, comme indiqué dans le menu Androidimage 6: Exemple d'application avec une icône de lancement récemment ajoutée, comme indiqué dans la section Android avec les applications en cours d'exécution

Qu'est-ce que tu penses?

Que penses-tu de cet article? Comment changez-vous vos icônes de lancement? Proposez votre perspective et vos idées dans la section commentaires ci-dessous.

Si vous avez aimé cet article, n'hésitez pas à appuyer sur ce bouton pour aider les autres à le trouver.

À propos de moi

Bonjour, je suis Tasos. Un ingénieur logiciel qui aime le Web et qui travaille beaucoup avec React Native et React. Je suis le cofondateur de l'agence de logiciels Coded Lines, où nous réalisons des projets Web et mobiles de bout en bout en mettant l'accent sur le marketing intégré à l'application. Si cela vous convient, contactez-moi ici: tasos.maroudas@codedlines.com. Merci d'être passé :)

___________________________________________________________________

Merci

George Karboulonis pour la relecture