Aggiungere un pulsante all'intestazione come lo voglio qui, ad esempio un pulsante di navigazione, richiede inizialmente
un po 'di lavoro extra, ma in seguito è molto semplice.
Prima di tutto abbiamo bisogno di installare un pacchetto aggiuntivo per renderlo più facile perché teoricamente, hai un
sacco di potere qui.
Puoi aggiungere tali pulsanti con l'aiuto delle opzioni di navigazione,
quindi qui su MealDetailScreen, oltre a impostare un titolo di intestazione, puoi impostare headerLeft e headerRight per aggiungere
pulsanti a sinistra e a destra del titolo.
In genere vuoi usare right perché la sinistra è riservata al pulsante Indietro e in generale
puoi semplicemente restituire un elemento jsx lì,
quindi puoi semplicemente impostarlo su text, come il preferito, che è qualcosa che potresti fare qui e in realtà lasciami mostralo a
te e quindi riavvia il server prima di usare un pacchetto perché
mentre puoi semplicemente aggiungere un componente qui, ottenere lo stile giusto, il posizionamento giusto per tutte le diverse piattaforme,
specialmente se non stai solo usando il testo qui ma anche forse un'icona che in genere si desidera
avere lì, che può essere davvero ingombrante ed è per questo che installeremo un pacchetto aggiuntivo
che rende così più facile di quanto non sia altrimenti.
Quindi lasciami riavviare questo con npm start, non npm install, npm start e con esso di nuovo in
esecuzione, ricaricalo qui su iOS e lascia che ti mostri quello che abbiamo qui ora che eseguo il rendering di un testo.
Vedi questo testo qui,
quindi questo viene
reso ma, come ho detto, avere la giusta imbottitura, il giusto allineamento, lo stile giusto, la giusta dimensione,
super fastidioso se fai tutto da solo perché non lo stai facendo questo per un
dispositivo ma per molti dispositivi.
Ecco perché installeremo effettivamente un pacchetto speciale qui che ci aiuta in questo.
Quindi, per ora, abbandona il processo, il processo dev in esecuzione e usa npm
install --save e installa il pacchetto di reazioni-navigazione-intestazione-pulsanti che è un pacchetto che ti aiuta, sorprendentemente se dai
un'occhiata al nome, con l'impostazione alcuni pulsanti nell'intestazione, quindi nella barra
degli strumenti in alto qui. Questo è un pacchetto che semplifica l'aggiunta di tali pulsanti. Con ciò aggiunto, riavvierò il mio server di
sviluppo con npm start e ora creerò un nuovo componente helper nella cartella componenti che chiamerò helper,
un pulsante di intestazione, non di aiuto, pulsante di intestazione. Lì, importerò React da React
perché questo sarà un normale componente React che creiamo lì e importerò
qualcosa da questo nuovo pacchetto di reazioni-navigazione-intestazione-pulsanti che abbiamo appena installato e che
qualcosa che importerò è il pulsante di intestazione. Oltre a ciò, importiamo anche qualcosa da @ expo / vector-icons che dovrebbe
essere disponibile ma solo per essere super sicuri, puoi anche eseguire npm install --save @
expo / vector-icons per installare anche questo pacchetto perché ' Ne avremo bisogno e la cosa che dobbiamo importare
da quel pacchetto sono gli ioniconi. Certo, puoi usare qualsiasi set di icone che
desideri, ho coperto le icone in precedenza in questo corso e sei libero di usare qualsiasi icona desiderata nel
pulsante dell'intestazione, lavorerò solo con gli ioniconi perché li uso nel resto di anche in questo
corso, ma ancora una volta, puoi usare tutte le icone che vuoi e ovviamente nell'intestazione, non
devi usare le icone, puoi usare anche altro testo ma in genere, usi le icone ovviamente, questo è
ciò che gli utenti in genere vengono utilizzati da altre app.
Inoltre, importerò anche i colori da costanti / colori e ora creo qui il mio componente e questo è, diciamo, il pulsante dell'intestazione
personalizzato o solo il pulsante dell'intestazione, qualunque cosa tu voglia nominarlo ma lo stiamo già importando, quindi noi devo
scegliere un nome diverso qui per non avere uno scontro di nomi
e questo riceverà alcuni oggetti di scena e restituirà il pulsante di intestazione che stiamo ottenendo da questo pacchetto che abbiamo installato,
ma presto aggiungeremo qualche configurazione extra, motivo per cui sono racchiudendolo in un componente
separato in modo da non dover ripetere quella configurazione per ogni pulsante che stiamo usando
ovunque nell'app
e quindi, ovviamente, esporterò il mio pulsante di intestazione personalizzato predefinito.
Quindi ora questo pulsante di intestazione che sto usando qui da questo pacchetto che abbiamo installato, che prima di tutto riceverà tutti
gli oggetti di scena che stiamo ottenendo con questo simpatico trucchetto che possiamo usare in React dove inoltriamo tutti
gli oggetti di scena con questo collegamento estraendo tutti le coppie chiave-valore e passandole a questo oggetto quale è
questo componente alla fine.
Quindi questa è la prima cosa, dobbiamo inoltrare tutti gli oggetti di
scena ed
è molto importante, non dimenticarlo altrimenti non funzionerà correttamente.
Il secondo passo è che aggiungiamo il puntello del componente Icona con una I maiuscola, è un puntello che il pulsante di intestazione che stiamo ottenendo
da questo pacchetto si aspetta e lì passo in ioniconi. Quindi questo si aspetta un pacchetto
di icone vettoriali che può essere usato per il rendering delle icone, non deve essere ionico ma
deve provenire da @ expo / vector-icons o dal sottostante pacchetto di icone vettoriali React Native su
cui si basa il pacchetto expo e puoi anche analizzare una dimensione dell'icona e lo standardizzerò in
modo che tutti i miei pulsanti di intestazione nell'intera app abbiano le stesse
dimensioni di 23 che ho trovato funzionare abbastanza bene. Ultimo ma non meno importante, qui creerò anche un colore e
userò il mio colore primario, anche se ovviamente dobbiamo assicurarci di differenziare per piattaforma. Quindi importerò anche la piattaforma da React Native perché su Android,
la nostra intestazione avrà il colore primario come sfondo, quindi lì vogliamo usare un'icona
di colore bianco.
Quindi qui, controllerò la piattaforma. os, se è uguale ad Android, allora voglio usare il bianco qui
e solo se è iOS, voglio usare il colore primario.
Quindi ora abbiamo quel pulsante di intestazione preconfigurato,
ora possiamo usarlo sul posto, nel componente in cui vogliamo aggiungerlo alla nostra intestazione e questo è
il MealDetailScreen in questo caso. Qui, ora abbiamo bisogno di
importare qualcos'altro dal pacchetto appena installato, quindi dai pulsanti di
intestazione-navigation-reazioni, da questo pacchetto, qui dobbiamo installare o importare i pulsanti di intestazione, quindi non il pulsante di intestazione che
usiamo nell'altro file ma i pulsanti di intestazione, al plurale. Lo aggiungiamo qui perché ora laggiù,
dove abbiamo impostato le opzioni di navigazione per questo componente, invece di utilizzare il
nostro componente di testo lì, voglio usare i pulsanti di intestazione,
questo componente ho appena aggiunto l'importazione e avvolgo questo attorno a un altro elemento che abbiamo
per importare da reagire-navigazione-intestazione-pulsanti e questo è l'elemento. L'articolo è un altro componente che importiamo
che ora possiamo usare tra i tag di apertura e
chiusura dei pulsanti di intestazione, quindi qui aggiungiamo l'articolo e l'articolo è un componente a chiusura automatica in cui descriviamo l'icona
che vogliamo rendere alla fine. Possiamo anche assegnare a questo un titolo che verrebbe
visualizzato come fallback e chiamerò questo preferito ma normalmente non
lo vedremo, invece qui posso anche impostare un
nome icona e ora dovrebbe essere, ad esempio ios- stella che è un'icona di ioniconi valida e puoi cercare nella lista @ expo / icone vettoriali che
ti ho mostrato in precedenza nel corso che trovi anche allegata a questo video per possibili
icone che puoi usare qui.
Assicurati solo di utilizzare un'icona dal set di icone che hai usato nei pulsanti dell'intestazione,
quindi nel mio caso, dagli ioniconi.
Ora questo indica quale icona
usare, ora qui possiamo anche aggiungere onPress per registrare una funzione che dovrebbe essere attivata quando viene
premuta quell'icona o quando viene premuto quell'elemento nell'intestazione
e per ora dirò solo come preferito qui, registra questo nella console in modo da vedere che ha funzionato.
Non siamo ancora del tutto lì perché non stiamo usando il
nostro pulsante di intestazione personalizzato, è l'ultimo pezzo mancante.
Dobbiamo importare questo componente che abbiamo
creato, quindi importare il pulsante dell'intestazione dai componenti e quindi lì, dal pulsante dell'intestazione, questo è il pulsante su
cui abbiamo lavorato e lo passiamo ai pulsanti dell'intestazione qui perché ci si aspetta un puntello del componente del pulsante dell'intestazione
dove puntiamo al componente che dovrebbe essere usato per rendere questo elemento alla fine.
Ora è tutto molto complesso, come puoi dire, un sacco di componenti nidificati, questa è
solo un'installazione che è un po 'ingombrante la prima volta che lo fai, ma quando poi lo usi in
altri componenti, si tratta solo di copiare la stessa configurazione qui, cambiando il titolo, cambiando
l'icona e cambiando la logica e sei lì, quindi questo è tutto ciò che
devi fare in futuro, è solo la
configurazione iniziale che è un lavoro extra qui. Con tutte queste impostazioni, tuttavia, se ora
lo salviamo, dovremmo essere
in grado di vedere la nostra stella qui. Questa è l'icona che vediamo e possiamo premere
questo e mentre premo questo, vedrai il segno come preferito viene registrato qui nella console. Vediamo anche che su Android, abbiamo sempre la
stella e se premo questa stella, vediamo anche il
segno come preferito, quindi funziona. Una piccola nota a margine che ho appena visto se abbiamo più ricette, potremmo volere un po 'di stile in
più lì, totalmente estraneo al pulsante dell'intestazione, solo vedendolo. Quindi nel MealItem. js file, sull'elemento pasto, aggiungerò
effettivamente un margine verticale di 10, di nuovo, totalmente non qualcosa
di cui hai bisogno qui, solo lì per assicurarmi che questo appaia più bello se abbiamo più
elementi.
La cosa importante qui ovviamente è che abbiamo il nostro pulsante di intestazione, questa icona e questo è il
modo in cui puoi aggiungere pulsanti o elementi di icone qui alla tua
intestazione e, naturalmente, puoi aggiungere più di uno. Qui nella schermata dei dettagli del pasto, puoi
avere più di questi elementi tra i pulsanti di intestazione qui che hai impostato su headerRight nelle opzioni di navigazione.
È così che aggiungi
elementi qui, puoi averne più di uno, ad esempio qui potremmo anche avere ios-star-outline che è un'altra icona che sembra un po 'diversa
in modo da poter vedere la differenza qui, ora ne abbiamo
due qui .
Quindi è possibile, ovviamente non dovresti sovraccaricarlo in modo che l'interfaccia utente rimanga pulita e funzioni, ma
è così che puoi aggiungere icone qui allo schermo. A proposito, l'avvertimento che sto ricevendo qui per quanto riguarda le doppie chiavi,
il titolo qui è anche usato come chiave per i tuoi articoli, quindi se hai
più oggetti, non dovresti usare lo stesso titolo ma
ho appena aggiunto questo per scopi dimostrativi comunque, quindi mi sbarazzerò di esso e siamo bravi.
Ora la nostra icona a stella non fa ancora nulla, è qualcosa
che aggiungeremo più tardi, ma almeno lo vediamo e questo è davvero importante in un modulo in cui
parliamo di navigazione e di lavoro con l'intestazione.