1
00:00:02,300 --> 00:00:05,320
L'ajout d'icônes est très simple dans une application

2
00:00:05,330 --> 00:00:07,760
React Native qui utilise expo.

3
00:00:08,060 --> 00:00:09,670
Soit dit en passant,

4
00:00:09,670 --> 00:00:11,530
nous pouvons nous débarrasser de

5
00:00:11,900 --> 00:00:18,830
l'importation des boutons, nous n'avons plus besoin du bouton intégré, mais revenons aux icônes car une icône peut être

6
00:00:18,980 --> 00:00:23,180
ajoutée en important quelque chose et maintenant c'est @ expo / vector-icons.

7
00:00:23,180 --> 00:00:26,410
Cela peut être un peu un nom de package étrange, mais

8
00:00:26,420 --> 00:00:31,910
c'est exactement ce qu'il est, il fait partie de la boîte à outils expo pour ainsi dire, il est

9
00:00:31,910 --> 00:00:33,260
automatiquement inclus dans tout

10
00:00:33,500 --> 00:00:40,250
projet React Native que vous avez créé avec expo et là, vous pouvez importer des composants qui vous aident à rendre les icônes et

11
00:00:40,250 --> 00:00:45,920
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

12
00:00:45,920 --> 00:00:52,790
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

13
00:00:52,820 --> 00:00:58,490
à la fin, donc les icônes qui sont incluses dans cet ensemble sont gérées par cette équipe

14
00:00:58,490 --> 00:01:02,450
ionique et je ne parle que des icônes ici, cela n'a

15
00:01:02,450 --> 00:01:08,300
rien à voir avec nous en ajoutant quoi que ce soit d'ionique à l'application React Native, nous utilisons

16
00:01:08,300 --> 00:01:09,650
simplement leurs icônes.

17
00:01:09,650 --> 00:01:16,080
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

18
00:01:16,190 --> 00:01:22,520
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

19
00:01:22,520 --> 00:01:27,680
la documentation officielle des icônes d'exposition que vous trouvez attaché à cette vidéo également, un lien vers cette

20
00:01:27,680 --> 00:01:34,270
documentation et là, vous pouvez non seulement en savoir plus sur la façon de les utiliser, mais vous trouverez également ce lien vers

21
00:01:34,270 --> 00:01:40,460
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

22
00:01:40,470 --> 00:01:45,110
toujours à quel package d'icônes il appartient, vous pouvez également rechercher des icônes comme supprimer

23
00:01:45,110 --> 00:01:50,030
pour trouver toutes les icônes qui ont quelque chose à voir avec la suppression de trucs

24
00:01:50,030 --> 00:01:55,070
et ensuite vous voyez qu'il y a quelque chose du package ionicons, quelque chose du matériel paquet

25
00:01:55,070 --> 00:01:56,820
d'icônes et ainsi de suite.

26
00:01:57,140 --> 00:02:01,820
Maintenant, les icônes que j'ai recherchées à l'avance proviennent du package ionicons.

27
00:02:01,820 --> 00:02:07,040
Donc ici, je vais importer des ionicons depuis @ expo / vector-icons et c'est maintenant automatiquement un

28
00:02:07,040 --> 00:02:10,830
composant que nous pouvons utiliser dans notre code jsx pour sortir une

29
00:02:10,940 --> 00:02:15,820
icône et si nous aurions utilisé des icônes de matériaux, ce serait aussi un composant juste

30
00:02:15,820 --> 00:02:16,270
pour

31
00:02:16,340 --> 00:02:22,810
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

32
00:02:22,810 --> 00:02:30,040
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

33
00:02:30,040 --> 00:02:36,250
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

34
00:02:36,250 --> 00:02:43,930
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

35
00:02:43,930 --> 00:02:46,290
ce composant texte aussi, donc ça marchera.

36
00:02:47,140 --> 00:02:51,910
Donc, revenons à cet ionicon ici, en ce moment, je ne dis rien sur

37
00:02:52,390 --> 00:02:58,400
l'icône que je veux utiliser et là, l'icône que j'ai choisie à l'avance a le nom de md-remove.

38
00:02:58,900 --> 00:03:06,430
Maintenant, vous dites à React Native et au type d'exposition que vous souhaitez utiliser cette icône en ajoutant le nom prop ici sur

39
00:03:06,520 --> 00:03:12,520
ionicons, puis cela prend une chaîne avec le nom de l'icône que vous trouvez dans ce répertoire, non?

40
00:03:12,550 --> 00:03:15,970
Alors ici, j'ai choisi cette icône ici que je

41
00:03:16,000 --> 00:03:20,440
veux utiliser, c'est donc le nom, md-remove que nous utilisons maintenant ici.

42
00:03:20,530 --> 00:03:22,520
C'est donc le nom de l'icône que nous avons ajouté ici.

43
00:03:22,600 --> 00:03:28,660
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

44
00:03:28,660 --> 00:03:33,250
la couleur que cette icône devrait avoir et ici, je vais définir cela pour avoir une couleur blanche.

45
00:03:33,280 --> 00:03:38,920
Maintenant, je vais copier cela et utiliser la même chose sur le bouton supérieur, mais là bien sûr,

46
00:03:38,920 --> 00:03:39,320
l'icône

47
00:03:39,340 --> 00:03:45,580
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

48
00:03:45,610 --> 00:03:50,650
icônes si vous le souhaitez et vous pouvez également essayer différents packages d'icônes au lieu d'ionicons

49
00:03:50,650 --> 00:03:54,830
ou même utiliser deux packages d'icônes différents dans un seul et même composant.

50
00:03:54,850 --> 00:03:59,650
Vous n'avez pas à vous en tenir à un seul package d'icônes, vous pouvez les mélanger et les faire

51
00:03:59,650 --> 00:04:04,150
correspondre comme vous le souhaitez, nous pourrions donc rendre un ionicon ici et rendre une icône de matériau

52
00:04:04,150 --> 00:04:08,350
ici, mais bien sûr, vous devez vous assurer que l'apparence globale de votre application fait sens.

53
00:04:08,350 --> 00:04:13,840
Donc, si vous mélangez des icônes trop follement, il est probable que cela ne soit pas aussi beau, donc vous voulez

54
00:04:13,840 --> 00:04:18,160
généralement vous en tenir à un ensemble, mais vous n'avez pas à le faire techniquement.

55
00:04:18,190 --> 00:04:23,500
Alors là, j'ai choisi ces deux icônes et maintenant avec ça si on enregistre ça, on commence un nouveau jeu ici.

56
00:04:23,500 --> 00:04:30,190
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

57
00:04:30,190 --> 00:04:36,100
plutôt bien à mon avis car cela nous donne une toute nouvelle façon de créer des interfaces utilisateur car avec

58
00:04:36,430 --> 00:04:41,380
les icônes, nous avons vraiment un autre outil important pour créer de grandes expériences utilisateur.