1
00:00:02,300 --> 00:00:05,320
L'aggiunta di icone è semplicissima in un'app

2
00:00:05,330 --> 00:00:07,760
React Native che utilizza expo.

3
00:00:08,060 --> 00:00:09,670
Possiamo eliminare l'importazione

4
00:00:09,670 --> 00:00:11,530
dei pulsanti a proposito,

5
00:00:11,900 --> 00:00:18,830
non abbiamo più bisogno del pulsante integrato ma torniamo alle icone perché un'icona può essere aggiunta

6
00:00:18,980 --> 00:00:23,180
importando qualcosa da e ora è @ expo / vector-icons.

7
00:00:23,180 --> 00:00:26,410
Potrebbe essere un po 'strano il nome di un pacchetto,

8
00:00:26,420 --> 00:00:31,910
ma è proprio quello che è, fa parte del toolkit expo per così dire, è automaticamente

9
00:00:31,910 --> 00:00:33,260
incluso in qualsiasi

10
00:00:33,500 --> 00:00:40,250
progetto React Native che hai creato con expo e lì puoi importare componenti che ti aiutano a renderizzare icone e

11
00:00:40,250 --> 00:00:45,920
un componente piuttosto carino c'è il componente ioniconi. Per questo, devi semplicemente sapere che ci sono diversi set di icone

12
00:00:45,920 --> 00:00:52,790
che sono integrati in expo o in questo pacchetto di icone vettoriali per essere precisi. Ionicons è un set di icone gestite dal team dietro

13
00:00:52,820 --> 00:00:58,490
ionic alla fine, quindi le icone che sono incluse in quel set sono gestite da quel team

14
00:00:58,490 --> 00:01:02,450
ionico e sto davvero solo parlando delle icone qui, questo non

15
00:01:02,450 --> 00:01:08,300
ha nulla a che fare con noi aggiungendo qualsiasi cosa, da ionica all'app React Native, stiamo solo usando

16
00:01:08,300 --> 00:01:09,650
le loro icone.

17
00:01:09,650 --> 00:01:16,080
Hai anche altri set di icone come icone malvagie, icone materiali, quindi un sacco di set di icone che puoi

18
00:01:16,190 --> 00:01:22,520
usare e un ottimo posto per conoscere tutte le icone incluse e ottenere una panoramica di tutte le icone incluse

19
00:01:22,520 --> 00:01:27,680
è la documentazione ufficiale delle icone di esposizione che trovi in allegato anche a questo video,

20
00:01:27,680 --> 00:01:34,270
un link a questa documentazione e lì puoi non solo imparare di più su come usarli ma troverai anche quel link

21
00:01:34,270 --> 00:01:40,460
alla directory delle icone e che è un lungo elenco di tutte le icone incluse che puoi usa e

22
00:01:40,470 --> 00:01:45,110
vedi sempre a quale pacchetto di icone appartiene, puoi anche cercare icone lì come

23
00:01:45,110 --> 00:01:50,030
rimuovere per trovare tutte le icone che hanno qualcosa a che fare con la rimozione

24
00:01:50,030 --> 00:01:55,070
di cose e poi vedi che c'è qualcosa dal pacchetto ioniconi, qualcosa dal materiale pacchetto di

25
00:01:55,070 --> 00:01:56,820
icone e così via.

26
00:01:57,140 --> 00:02:01,820
Ora le icone che ho cercato in anticipo provengono dal pacchetto ionicons.

27
00:02:01,820 --> 00:02:07,040
Quindi qui, importerò ioniconi da @ expo / vector-icons e questo ora è automaticamente un

28
00:02:07,040 --> 00:02:10,830
componente che possiamo usare nel nostro codice jsx per generare

29
00:02:10,940 --> 00:02:15,820
un'icona e se avessimo usato icone materiali, sarebbe anche un componente solo per

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

31
00:02:16,340 --> 00:02:22,810
un'icona materiale ma voglio usare un'icona ionicon, quindi la userò e ora scenderò al codice jsx e invece di

32
00:02:22,810 --> 00:02:30,040
usare qui sotto, in realtà emetterò un tale ionicon, tale icona qui nel mio pulsante e la cosa grandiosa è che

33
00:02:30,040 --> 00:02:36,250
un'icona simile qui può anche essere nidificata nel nostro pulsante anche se ciò che stiamo emettendo qui, oggetti

34
00:02:36,250 --> 00:02:43,930
di scena per bambini, è invece di un nodo di testo ma che è supportato, puoi generare un componente icona in quel

35
00:02:43,930 --> 00:02:46,290
anche componente di testo, quindi funzionerà.

36
00:02:47,140 --> 00:02:51,910
Quindi, tornando a questo ionicon qui, in questo momento non sto dicendo nulla

37
00:02:52,390 --> 00:02:58,400
sull'icona che voglio usare e lì, l'icona che ho scelto in anticipo ha un nome di md-remove.

38
00:02:58,900 --> 00:03:06,430
Ora dici a React Native e al tipo di esposizione che vuoi usare quell'icona aggiungendo il nome prop qui su ionicons

39
00:03:06,520 --> 00:03:12,520
e quindi questo richiede una stringa con il nome dell'icona che trovi in quella directory, giusto?

40
00:03:12,550 --> 00:03:15,970
Quindi qui ho scelto questa icona qui che

41
00:03:16,000 --> 00:03:20,440
voglio usare, quindi questo è il nome, md-remove che ora usiamo qui.

42
00:03:20,530 --> 00:03:22,520
Questo è il nome dell'icona che abbiamo aggiunto qui.

43
00:03:22,600 --> 00:03:28,660
Successivamente puoi anche impostare la dimensione dell'icona in pixel e qui andrò con 24 per avere una bella icona grande e anche

44
00:03:28,660 --> 00:03:33,250
il colore che questa icona dovrebbe avere e qui, imposterò questo per avere un colore bianco.

45
00:03:33,280 --> 00:03:39,320
Ora lo copierò e userò lo stesso sul pulsante più grande ma lì ovviamente l'icona è diversa,

46
00:03:39,340 --> 00:03:45,580
qui ho scelto md-add come icona e puoi ovviamente esplorare quell'elenco di icone e scegliere icone diverse se

47
00:03:45,610 --> 00:03:50,650
vuoi e puoi anche provare diversi pacchetti di icone invece di ioniconi o persino

48
00:03:50,650 --> 00:03:54,830
usare due diversi pacchetti di icone in uno stesso componente.

49
00:03:54,850 --> 00:03:59,650
Non è necessario attenersi a un solo pacchetto di icone, è possibile mescolarli e abbinarli come

50
00:03:59,650 --> 00:04:04,150
si desidera, in modo da poter rendere uno ionicon qui e renderizzare un'icona materiale

51
00:04:04,150 --> 00:04:08,350
qui, ma ovviamente dovresti assicurarti che l'aspetto generale della tua app renda senso.

52
00:04:08,350 --> 00:04:13,840
Quindi, se stai mescolando le icone troppo selvaggiamente, è probabile che non sembrerà così bello, quindi

53
00:04:13,840 --> 00:04:18,160
in genere vuoi attenersi a un set ma non devi tecnicamente.

54
00:04:18,190 --> 00:04:23,500
Quindi qui, ho scelto queste due icone e ora con ciò se salviamo questo, iniziamo un nuovo gioco qui.

55
00:04:23,500 --> 00:04:30,190
Ora abbiamo un'icona più e meno qui per indicare se i numeri devono essere più bassi o più alti e

56
00:04:30,190 --> 00:04:36,100
questo è abbastanza carino secondo me perché ci dà un modo completamente nuovo di costruire interfacce utente perché

57
00:04:36,430 --> 00:04:41,380
con le icone abbiamo davvero un altro strumento importante per creare esperienze utente straordinarie.