1 00:00:02,250 --> 00:00:07,590 Aggiungere un pulsante all'intestazione come lo voglio qui, ad esempio un pulsante di navigazione, richiede inizialmente 2 00:00:07,590 --> 00:00:11,670 un po 'di lavoro extra, ma in seguito è molto semplice. 3 00:00:11,700 --> 00:00:17,160 Prima di tutto abbiamo bisogno di installare un pacchetto aggiuntivo per renderlo più facile perché teoricamente, hai un 4 00:00:17,160 --> 00:00:18,540 sacco di potere qui. 5 00:00:18,660 --> 00:00:21,690 Puoi aggiungere tali pulsanti con l'aiuto delle opzioni di navigazione, 6 00:00:21,690 --> 00:00:27,450 quindi qui su MealDetailScreen, oltre a impostare un titolo di intestazione, puoi impostare headerLeft e headerRight per aggiungere 7 00:00:27,450 --> 00:00:30,330 pulsanti a sinistra e a destra del titolo. 8 00:00:30,330 --> 00:00:36,330 In genere vuoi usare right perché la sinistra è riservata al pulsante Indietro e in generale 9 00:00:36,330 --> 00:00:39,310 puoi semplicemente restituire un elemento jsx lì, 10 00:00:39,450 --> 00:00:47,220 quindi puoi semplicemente impostarlo su text, come il preferito, che è qualcosa che potresti fare qui e in realtà lasciami mostralo a 11 00:00:47,220 --> 00:00:51,870 te e quindi riavvia il server prima di usare un pacchetto perché 12 00:00:51,870 --> 00:00:58,890 mentre puoi semplicemente aggiungere un componente qui, ottenere lo stile giusto, il posizionamento giusto per tutte le diverse piattaforme, 13 00:00:58,950 --> 00:01:05,430 specialmente se non stai solo usando il testo qui ma anche forse un'icona che in genere si desidera 14 00:01:05,430 --> 00:01:11,160 avere lì, che può essere davvero ingombrante ed è per questo che installeremo un pacchetto aggiuntivo 15 00:01:11,160 --> 00:01:14,810 che rende così più facile di quanto non sia altrimenti. 16 00:01:18,260 --> 00:01:25,510 Quindi lasciami riavviare questo con npm start, non npm install, npm start e con esso di nuovo in 17 00:01:25,850 --> 00:01:34,320 esecuzione, ricaricalo qui su iOS e lascia che ti mostri quello che abbiamo qui ora che eseguo il rendering di un testo. 18 00:01:34,520 --> 00:01:35,930 Vedi questo testo qui, 19 00:01:35,960 --> 00:01:37,180 quindi questo viene 20 00:01:37,190 --> 00:01:43,010 reso ma, come ho detto, avere la giusta imbottitura, il giusto allineamento, lo stile giusto, la giusta dimensione, 21 00:01:43,010 --> 00:01:47,870 super fastidioso se fai tutto da solo perché non lo stai facendo questo per un 22 00:01:47,870 --> 00:01:49,300 dispositivo ma per molti dispositivi. 23 00:01:49,370 --> 00:01:54,320 Ecco perché installeremo effettivamente un pacchetto speciale qui che ci aiuta in questo. 24 00:01:54,320 --> 00:02:01,250 Quindi, per ora, abbandona il processo, il processo dev in esecuzione e usa npm 25 00:02:01,250 --> 00:02:10,130 install --save e installa il pacchetto di reazioni-navigazione-intestazione-pulsanti che è un pacchetto che ti aiuta, sorprendentemente se dai 26 00:02:10,310 --> 00:02:16,220 un'occhiata al nome, con l'impostazione alcuni pulsanti nell'intestazione, quindi nella barra 27 00:02:16,280 --> 00:02:24,850 degli strumenti in alto qui. Questo è un pacchetto che semplifica l'aggiunta di tali pulsanti. Con ciò aggiunto, riavvierò il mio server di 28 00:02:24,850 --> 00:02:30,490 sviluppo con npm start e ora creerò un nuovo componente helper nella cartella componenti che chiamerò helper, 29 00:02:30,490 --> 00:02:37,290 un pulsante di intestazione, non di aiuto, pulsante di intestazione. Lì, importerò React da React 30 00:02:37,300 --> 00:02:44,210 perché questo sarà un normale componente React che creiamo lì e importerò 31 00:02:44,570 --> 00:02:51,980 qualcosa da questo nuovo pacchetto di reazioni-navigazione-intestazione-pulsanti che abbiamo appena installato e che 32 00:02:51,980 --> 00:03:02,650 qualcosa che importerò è il pulsante di intestazione. Oltre a ciò, importiamo anche qualcosa da @ expo / vector-icons che dovrebbe 33 00:03:02,680 --> 00:03:08,830 essere disponibile ma solo per essere super sicuri, puoi anche eseguire npm install --save @ 34 00:03:08,830 --> 00:03:16,270 expo / vector-icons per installare anche questo pacchetto perché ' Ne avremo bisogno e la cosa che dobbiamo importare 35 00:03:19,050 --> 00:03:24,630 da quel pacchetto sono gli ioniconi. Certo, puoi usare qualsiasi set di icone che 36 00:03:24,630 --> 00:03:30,270 desideri, ho coperto le icone in precedenza in questo corso e sei libero di usare qualsiasi icona desiderata nel 37 00:03:30,270 --> 00:03:35,250 pulsante dell'intestazione, lavorerò solo con gli ioniconi perché li uso nel resto di anche in questo 38 00:03:35,460 --> 00:03:40,440 corso, ma ancora una volta, puoi usare tutte le icone che vuoi e ovviamente nell'intestazione, non 39 00:03:40,440 --> 00:03:45,900 devi usare le icone, puoi usare anche altro testo ma in genere, usi le icone ovviamente, questo è 40 00:03:45,900 --> 00:03:49,470 ciò che gli utenti in genere vengono utilizzati da altre app. 41 00:03:49,740 --> 00:03:58,040 Inoltre, importerò anche i colori da costanti / colori e ora creo qui il mio componente e questo è, diciamo, il pulsante dell'intestazione 42 00:03:58,070 --> 00:04:04,850 personalizzato o solo il pulsante dell'intestazione, qualunque cosa tu voglia nominarlo ma lo stiamo già importando, quindi noi devo 43 00:04:05,030 --> 00:04:09,290 scegliere un nome diverso qui per non avere uno scontro di nomi 44 00:04:09,650 --> 00:04:17,390 e questo riceverà alcuni oggetti di scena e restituirà il pulsante di intestazione che stiamo ottenendo da questo pacchetto che abbiamo installato, 45 00:04:17,390 --> 00:04:22,280 ma presto aggiungeremo qualche configurazione extra, motivo per cui sono racchiudendolo in un componente 46 00:04:22,280 --> 00:04:27,800 separato in modo da non dover ripetere quella configurazione per ogni pulsante che stiamo usando 47 00:04:27,800 --> 00:04:28,990 ovunque nell'app 48 00:04:29,140 --> 00:04:33,250 e quindi, ovviamente, esporterò il mio pulsante di intestazione personalizzato predefinito. 49 00:04:33,340 --> 00:04:39,850 Quindi ora questo pulsante di intestazione che sto usando qui da questo pacchetto che abbiamo installato, che prima di tutto riceverà tutti 50 00:04:39,850 --> 00:04:45,790 gli oggetti di scena che stiamo ottenendo con questo simpatico trucchetto che possiamo usare in React dove inoltriamo tutti 51 00:04:45,790 --> 00:04:51,700 gli oggetti di scena con questo collegamento estraendo tutti le coppie chiave-valore e passandole a questo oggetto quale è 52 00:04:51,700 --> 00:04:53,060 questo componente alla fine. 53 00:04:53,110 --> 00:04:56,790 Quindi questa è la prima cosa, dobbiamo inoltrare tutti gli oggetti di 54 00:04:56,800 --> 00:04:57,670 scena ed 55 00:04:57,670 --> 00:05:00,470 è molto importante, non dimenticarlo altrimenti non funzionerà correttamente. 56 00:05:00,490 --> 00:05:07,540 Il secondo passo è che aggiungiamo il puntello del componente Icona con una I maiuscola, è un puntello che il pulsante di intestazione che stiamo ottenendo 57 00:05:07,540 --> 00:05:13,580 da questo pacchetto si aspetta e lì passo in ioniconi. Quindi questo si aspetta un pacchetto 58 00:05:13,580 --> 00:05:20,730 di icone vettoriali che può essere usato per il rendering delle icone, non deve essere ionico ma 59 00:05:20,730 --> 00:05:27,800 deve provenire da @ expo / vector-icons o dal sottostante pacchetto di icone vettoriali React Native su 60 00:05:27,800 --> 00:05:34,850 cui si basa il pacchetto expo e puoi anche analizzare una dimensione dell'icona e lo standardizzerò in 61 00:05:34,850 --> 00:05:40,370 modo che tutti i miei pulsanti di intestazione nell'intera app abbiano le stesse 62 00:05:40,370 --> 00:05:48,470 dimensioni di 23 che ho trovato funzionare abbastanza bene. Ultimo ma non meno importante, qui creerò anche un colore e 63 00:05:49,160 --> 00:05:59,360 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, 64 00:05:59,390 --> 00:06:06,210 la nostra intestazione avrà il colore primario come sfondo, quindi lì vogliamo usare un'icona 65 00:06:06,210 --> 00:06:08,000 di colore bianco. 66 00:06:08,150 --> 00:06:15,320 Quindi qui, controllerò la piattaforma. os, se è uguale ad Android, allora voglio usare il bianco qui 67 00:06:15,360 --> 00:06:18,350 e solo se è iOS, voglio usare il colore primario. 68 00:06:18,470 --> 00:06:21,020 Quindi ora abbiamo quel pulsante di intestazione preconfigurato, 69 00:06:21,020 --> 00:06:26,840 ora possiamo usarlo sul posto, nel componente in cui vogliamo aggiungerlo alla nostra intestazione e questo è 70 00:06:26,840 --> 00:06:31,030 il MealDetailScreen in questo caso. Qui, ora abbiamo bisogno di 71 00:06:31,120 --> 00:06:34,520 importare qualcos'altro dal pacchetto appena installato, quindi dai pulsanti di 72 00:06:34,720 --> 00:06:41,140 intestazione-navigation-reazioni, da questo pacchetto, qui dobbiamo installare o importare i pulsanti di intestazione, quindi non il pulsante di intestazione che 73 00:06:41,140 --> 00:06:47,710 usiamo nell'altro file ma i pulsanti di intestazione, al plurale. Lo aggiungiamo qui perché ora laggiù, 74 00:06:47,770 --> 00:06:53,650 dove abbiamo impostato le opzioni di navigazione per questo componente, invece di utilizzare il 75 00:06:53,650 --> 00:06:58,200 nostro componente di testo lì, voglio usare i pulsanti di intestazione, 76 00:06:58,250 --> 00:07:04,940 questo componente ho appena aggiunto l'importazione e avvolgo questo attorno a un altro elemento che abbiamo 77 00:07:04,960 --> 00:07:11,940 per importare da reagire-navigazione-intestazione-pulsanti e questo è l'elemento. L'articolo è un altro componente che importiamo 78 00:07:12,090 --> 00:07:16,710 che ora possiamo usare tra i tag di apertura e 79 00:07:16,710 --> 00:07:26,600 chiusura dei pulsanti di intestazione, quindi qui aggiungiamo l'articolo e l'articolo è un componente a chiusura automatica in cui descriviamo l'icona 80 00:07:26,600 --> 00:07:31,970 che vogliamo rendere alla fine. Possiamo anche assegnare a questo un titolo che verrebbe 81 00:07:32,000 --> 00:07:35,170 visualizzato come fallback e chiamerò questo preferito ma normalmente non 82 00:07:35,180 --> 00:07:37,670 lo vedremo, invece qui posso anche impostare un 83 00:07:37,670 --> 00:07:46,280 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 84 00:07:46,280 --> 00:07:51,440 ti ho mostrato in precedenza nel corso che trovi anche allegata a questo video per possibili 85 00:07:51,440 --> 00:07:53,570 icone che puoi usare qui. 86 00:07:53,570 --> 00:07:59,540 Assicurati solo di utilizzare un'icona dal set di icone che hai usato nei pulsanti dell'intestazione, 87 00:07:59,540 --> 00:08:01,990 quindi nel mio caso, dagli ioniconi. 88 00:08:02,000 --> 00:08:03,830 Ora questo indica quale icona 89 00:08:03,830 --> 00:08:09,680 usare, ora qui possiamo anche aggiungere onPress per registrare una funzione che dovrebbe essere attivata quando viene 90 00:08:09,680 --> 00:08:12,570 premuta quell'icona o quando viene premuto quell'elemento nell'intestazione 91 00:08:12,650 --> 00:08:19,220 e per ora dirò solo come preferito qui, registra questo nella console in modo da vedere che ha funzionato. 92 00:08:19,220 --> 00:08:22,720 Non siamo ancora del tutto lì perché non stiamo usando il 93 00:08:22,730 --> 00:08:25,870 nostro pulsante di intestazione personalizzato, è l'ultimo pezzo mancante. 94 00:08:26,000 --> 00:08:28,370 Dobbiamo importare questo componente che abbiamo 95 00:08:28,430 --> 00:08:35,120 creato, quindi importare il pulsante dell'intestazione dai componenti e quindi lì, dal pulsante dell'intestazione, questo è il pulsante su 96 00:08:35,120 --> 00:08:42,740 cui abbiamo lavorato e lo passiamo ai pulsanti dell'intestazione qui perché ci si aspetta un puntello del componente del pulsante dell'intestazione 97 00:08:42,740 --> 00:08:47,870 dove puntiamo al componente che dovrebbe essere usato per rendere questo elemento alla fine. 98 00:08:47,870 --> 00:08:52,220 Ora è tutto molto complesso, come puoi dire, un sacco di componenti nidificati, questa è 99 00:08:52,220 --> 00:08:57,500 solo un'installazione che è un po 'ingombrante la prima volta che lo fai, ma quando poi lo usi in 100 00:08:57,500 --> 00:09:01,790 altri componenti, si tratta solo di copiare la stessa configurazione qui, cambiando il titolo, cambiando 101 00:09:01,790 --> 00:09:05,860 l'icona e cambiando la logica e sei lì, quindi questo è tutto ciò che 102 00:09:05,870 --> 00:09:07,970 devi fare in futuro, è solo la 103 00:09:08,000 --> 00:09:12,740 configurazione iniziale che è un lavoro extra qui. Con tutte queste impostazioni, tuttavia, se ora 104 00:09:12,740 --> 00:09:14,540 lo salviamo, dovremmo essere 105 00:09:19,710 --> 00:09:25,770 in grado di vedere la nostra stella qui. Questa è l'icona che vediamo e possiamo premere 106 00:09:25,770 --> 00:09:35,290 questo e mentre premo questo, vedrai il segno come preferito viene registrato qui nella console. Vediamo anche che su Android, abbiamo sempre la 107 00:09:35,300 --> 00:09:40,150 stella e se premo questa stella, vediamo anche il 108 00:09:40,160 --> 00:09:47,100 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 109 00:09:47,100 --> 00:09:52,470 più lì, totalmente estraneo al pulsante dell'intestazione, solo vedendolo. Quindi nel MealItem. js file, sull'elemento pasto, aggiungerò 110 00:09:52,470 --> 00:09:56,460 effettivamente un margine verticale di 10, di nuovo, totalmente non qualcosa 111 00:09:56,520 --> 00:10:02,520 di cui hai bisogno qui, solo lì per assicurarmi che questo appaia più bello se abbiamo più 112 00:10:02,520 --> 00:10:03,050 elementi. 113 00:10:03,060 --> 00:10:08,670 La cosa importante qui ovviamente è che abbiamo il nostro pulsante di intestazione, questa icona e questo è il 114 00:10:09,180 --> 00:10:13,100 modo in cui puoi aggiungere pulsanti o elementi di icone qui alla tua 115 00:10:13,170 --> 00:10:18,570 intestazione e, naturalmente, puoi aggiungere più di uno. Qui nella schermata dei dettagli del pasto, puoi 116 00:10:18,600 --> 00:10:24,770 avere più di questi elementi tra i pulsanti di intestazione qui che hai impostato su headerRight nelle opzioni di navigazione. 117 00:10:24,850 --> 00:10:26,220 È così che aggiungi 118 00:10:26,220 --> 00:10:33,750 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 119 00:10:33,750 --> 00:10:37,260 in modo da poter vedere la differenza qui, ora ne abbiamo 120 00:10:37,260 --> 00:10:38,630 due qui . 121 00:10:38,790 --> 00:10:45,600 Quindi è possibile, ovviamente non dovresti sovraccaricarlo in modo che l'interfaccia utente rimanga pulita e funzioni, ma 122 00:10:46,710 --> 00:10:55,010 è così che puoi aggiungere icone qui allo schermo. A proposito, l'avvertimento che sto ricevendo qui per quanto riguarda le doppie chiavi, 123 00:10:55,010 --> 00:10:59,910 il titolo qui è anche usato come chiave per i tuoi articoli, quindi se hai 124 00:10:59,930 --> 00:11:03,350 più oggetti, non dovresti usare lo stesso titolo ma 125 00:11:03,350 --> 00:11:08,640 ho appena aggiunto questo per scopi dimostrativi comunque, quindi mi sbarazzerò di esso e siamo bravi. 126 00:11:08,810 --> 00:11:12,290 Ora la nostra icona a stella non fa ancora nulla, è qualcosa 127 00:11:12,320 --> 00:11:17,660 che aggiungeremo più tardi, ma almeno lo vediamo e questo è davvero importante in un modulo in cui 128 00:11:17,660 --> 00:11:20,300 parliamo di navigazione e di lavoro con l'intestazione.