L'aggiunta di icone è semplicissima in un'app
React Native che utilizza expo.
Possiamo eliminare l'importazione
dei pulsanti a proposito,
non abbiamo più bisogno del pulsante integrato ma torniamo alle icone perché un'icona può essere aggiunta
importando qualcosa da e ora è @ expo / vector-icons.
Potrebbe essere un po 'strano il nome di un pacchetto,
ma è proprio quello che è, fa parte del toolkit expo per così dire, è automaticamente
incluso in qualsiasi
progetto React Native che hai creato con expo e lì puoi importare componenti che ti aiutano a renderizzare icone e
un componente piuttosto carino c'è il componente ioniconi. Per questo, devi semplicemente sapere che ci sono diversi set di icone
che sono integrati in expo o in questo pacchetto di icone vettoriali per essere precisi. Ionicons è un set di icone gestite dal team dietro
ionic alla fine, quindi le icone che sono incluse in quel set sono gestite da quel team
ionico e sto davvero solo parlando delle icone qui, questo non
ha nulla a che fare con noi aggiungendo qualsiasi cosa, da ionica all'app React Native, stiamo solo usando
le loro icone.
Hai anche altri set di icone come icone malvagie, icone materiali, quindi un sacco di set di icone che puoi
usare e un ottimo posto per conoscere tutte le icone incluse e ottenere una panoramica di tutte le icone incluse
è la documentazione ufficiale delle icone di esposizione che trovi in allegato anche a questo video,
un link a questa documentazione e lì puoi non solo imparare di più su come usarli ma troverai anche quel link
alla directory delle icone e che è un lungo elenco di tutte le icone incluse che puoi usa e
vedi sempre a quale pacchetto di icone appartiene, puoi anche cercare icone lì come
rimuovere per trovare tutte le icone che hanno qualcosa a che fare con la rimozione
di cose e poi vedi che c'è qualcosa dal pacchetto ioniconi, qualcosa dal materiale pacchetto di
icone e così via.
Ora le icone che ho cercato in anticipo provengono dal pacchetto ionicons.
Quindi qui, importerò ioniconi da @ expo / vector-icons e questo ora è automaticamente un
componente che possiamo usare nel nostro codice jsx per generare
un'icona e se avessimo usato icone materiali, sarebbe anche un componente solo per
output
un'icona materiale ma voglio usare un'icona ionicon, quindi la userò e ora scenderò al codice jsx e invece di
usare qui sotto, in realtà emetterò un tale ionicon, tale icona qui nel mio pulsante e la cosa grandiosa è che
un'icona simile qui può anche essere nidificata nel nostro pulsante anche se ciò che stiamo emettendo qui, oggetti
di scena per bambini, è invece di un nodo di testo ma che è supportato, puoi generare un componente icona in quel
anche componente di testo, quindi funzionerà.
Quindi, tornando a questo ionicon qui, in questo momento non sto dicendo nulla
sull'icona che voglio usare e lì, l'icona che ho scelto in anticipo ha un nome di md-remove.
Ora dici a React Native e al tipo di esposizione che vuoi usare quell'icona aggiungendo il nome prop qui su ionicons
e quindi questo richiede una stringa con il nome dell'icona che trovi in quella directory, giusto?
Quindi qui ho scelto questa icona qui che
voglio usare, quindi questo è il nome, md-remove che ora usiamo qui.
Questo è il nome dell'icona che abbiamo aggiunto qui.
Successivamente puoi anche impostare la dimensione dell'icona in pixel e qui andrò con 24 per avere una bella icona grande e anche
il colore che questa icona dovrebbe avere e qui, imposterò questo per avere un colore bianco.
Ora lo copierò e userò lo stesso sul pulsante più grande ma lì ovviamente l'icona è diversa,
qui ho scelto md-add come icona e puoi ovviamente esplorare quell'elenco di icone e scegliere icone diverse se
vuoi e puoi anche provare diversi pacchetti di icone invece di ioniconi o persino
usare due diversi pacchetti di icone in uno stesso componente.
Non è necessario attenersi a un solo pacchetto di icone, è possibile mescolarli e abbinarli come
si desidera, in modo da poter rendere uno ionicon qui e renderizzare un'icona materiale
qui, ma ovviamente dovresti assicurarti che l'aspetto generale della tua app renda senso.
Quindi, se stai mescolando le icone troppo selvaggiamente, è probabile che non sembrerà così bello, quindi
in genere vuoi attenersi a un set ma non devi tecnicamente.
Quindi qui, ho scelto queste due icone e ora con ciò se salviamo questo, iniziamo un nuovo gioco qui.
Ora abbiamo un'icona più e meno qui per indicare se i numeri devono essere più bassi o più alti e
questo è abbastanza carino secondo me perché ci dà un modo completamente nuovo di costruire interfacce utente perché
con le icone abbiamo davvero un altro strumento importante per creare esperienze utente straordinarie.