L'ajout d'icônes est très simple dans une application
React Native qui utilise expo.
Soit dit en passant,
nous pouvons nous débarrasser de
l'importation des boutons, nous n'avons plus besoin du bouton intégré, mais revenons aux icônes car une icône peut être
ajoutée en important quelque chose et maintenant c'est @ expo / vector-icons.
Cela peut être un peu un nom de package étrange, mais
c'est exactement ce qu'il est, il fait partie de la boîte à outils expo pour ainsi dire, il est
automatiquement inclus dans tout
projet React Native que vous avez créé avec expo et là, vous pouvez importer des composants qui vous aident à rendre les icônes et
un composant assez agréable il y a le composant ionicons. Pour cela, vous devez simplement savoir qu'il existe différents jeux d'icônes
qui sont intégrés dans expo ou dans ce package d'icônes vectorielles pour être précis. Ionicons est un ensemble d'icônes géré par l'équipe derrière ionic
à la fin, donc les icônes qui sont incluses dans cet ensemble sont gérées par cette équipe
ionique et je ne parle que des icônes ici, cela n'a
rien à voir avec nous en ajoutant quoi que ce soit d'ionique à l'application React Native, nous utilisons
simplement leurs icônes.
Vous avez également d'autres jeux d'icônes comme des icônes maléfiques, des icônes matérielles, donc beaucoup d'ensembles d'icônes que vous pouvez utiliser et
un excellent endroit pour en savoir plus sur toutes les icônes incluses et obtenir un aperçu de toutes les icônes incluses est
la documentation officielle des icônes d'exposition que vous trouvez attaché à cette vidéo également, un lien vers cette
documentation et là, vous pouvez non seulement en savoir plus sur la façon de les utiliser, mais vous trouverez également ce lien vers
le répertoire des icônes et c'est une longue liste de toutes les icônes incluses que vous pouvez utilisez et vous voyez
toujours à quel package d'icônes il appartient, vous pouvez également rechercher des icônes comme supprimer
pour trouver toutes les icônes qui ont quelque chose à voir avec la suppression de trucs
et ensuite vous voyez qu'il y a quelque chose du package ionicons, quelque chose du matériel paquet
d'icônes et ainsi de suite.
Maintenant, les icônes que j'ai recherchées à l'avance proviennent du package ionicons.
Donc ici, je vais importer des ionicons depuis @ expo / vector-icons et c'est maintenant automatiquement un
composant que nous pouvons utiliser dans notre code jsx pour sortir une
icône et si nous aurions utilisé des icônes de matériaux, ce serait aussi un composant juste
pour
sortir une icône de matériau mais je veux utiliser une icône ionicon, donc je vais l'utiliser et maintenant je vais descendre
au code jsx et au lieu d'utiliser plus bas ici, je vais en fait sortir un tel ionicon, une telle icône ici dans mon
bouton et la grande chose est qu'une telle icône ici peut également être imbriquée dans notre bouton même si ce que
nous sortons ici, les accessoires enfants, est au lieu d'un nœud de texte mais qui est pris en charge, vous pouvez sortir un composant d'icône dans
ce composant texte aussi, donc ça marchera.
Donc, revenons à cet ionicon ici, en ce moment, je ne dis rien sur
l'icône que je veux utiliser et là, l'icône que j'ai choisie à l'avance a le nom de md-remove.
Maintenant, vous dites à React Native et au type d'exposition que vous souhaitez utiliser cette icône en ajoutant le nom prop ici sur
ionicons, puis cela prend une chaîne avec le nom de l'icône que vous trouvez dans ce répertoire, non?
Alors ici, j'ai choisi cette icône ici que je
veux utiliser, c'est donc le nom, md-remove que nous utilisons maintenant ici.
C'est donc le nom de l'icône que nous avons ajouté ici.
Ensuite, vous pouvez également configurer la taille de l'icône en pixels et ici je vais aller avec 24 pour avoir une belle grande icône et aussi
la couleur que cette icône devrait avoir et ici, je vais définir cela pour avoir une couleur blanche.
Maintenant, je vais copier cela et utiliser la même chose sur le bouton supérieur, mais là bien sûr,
l'icône
est différente, ici j'ai choisi md-add comme icône et vous pouvez bien sûr explorer cette liste d'icônes et choisir différentes
icônes si vous le souhaitez et vous pouvez également essayer différents packages d'icônes au lieu d'ionicons
ou même utiliser deux packages d'icônes différents dans un seul et même composant.
Vous n'avez pas à vous en tenir à un seul package d'icônes, vous pouvez les mélanger et les faire
correspondre comme vous le souhaitez, nous pourrions donc rendre un ionicon ici et rendre une icône de matériau
ici, mais bien sûr, vous devez vous assurer que l'apparence globale de votre application fait sens.
Donc, si vous mélangez des icônes trop follement, il est probable que cela ne soit pas aussi beau, donc vous voulez
généralement vous en tenir à un ensemble, mais vous n'avez pas à le faire techniquement.
Alors là, j'ai choisi ces deux icônes et maintenant avec ça si on enregistre ça, on commence un nouveau jeu ici.
Maintenant, nous avons ici un icône plus et un moins pour indiquer si les nombres doivent être inférieurs ou supérieurs et c'est
plutôt bien à mon avis car cela nous donne une toute nouvelle façon de créer des interfaces utilisateur car avec
les icônes, nous avons vraiment un autre outil important pour créer de grandes expériences utilisateur.