1 00:00:02,120 --> 00:00:07,100 Quindi andrò alla schermata di panoramica del prodotto perché prima di aggiungere un 2 00:00:07,100 --> 00:00:09,590 navigatore, voglio essere in grado di 3 00:00:09,590 --> 00:00:18,380 vedere almeno qualcosa su quella schermata e quindi qui, ora dobbiamo importare utilizzare il selettore da React Redux perché ciò ci permetterà di 4 00:00:18,380 --> 00:00:22,630 accedere al negozio Redux e ottenere i nostri prodotti da lì. 5 00:00:22,640 --> 00:00:28,790 Quindi qui alla fine quello che possiamo fare è poter ottenere i nostri prodotti e archiviarli in prodotti 6 00:00:28,790 --> 00:00:30,800 costanti chiamando il selettore d'uso e, 7 00:00:30,800 --> 00:00:36,950 come hai appreso nel modulo precedente sulla gestione dello stato in Redux, usa il selettore accetta una funzione 8 00:00:36,950 --> 00:00:44,060 che riceve automaticamente lo stato , lo stato Redux come input e che quindi restituisce tutti i dati che vuoi ottenere 9 00:00:44,060 --> 00:00:45,470 da lì e 10 00:00:45,770 --> 00:00:47,360 lì nello stato Redux, 11 00:00:47,360 --> 00:00:53,780 voglio toccare la sezione dei miei prodotti e devi usare il nome che usi qui nei riduttori combinati per 12 00:00:53,990 --> 00:00:57,990 ottenere questo stato, i dati gestiti con i prodotti per l'utente. 13 00:00:58,010 --> 00:01:05,180 Quindi qui dirò prodotti di stato e ora in quella fetta del nostro stato, voglio ottenere 14 00:01:06,220 --> 00:01:10,270 prodotti disponibili, quindi prendiamo. prodotti disponibili qui e questa è 15 00:01:10,270 --> 00:01:15,460 questa sintassi della funzione freccia corta in cui viene restituita automaticamente la parte sul lato 16 00:01:15,460 --> 00:01:17,020 destro della freccia. 17 00:01:17,020 --> 00:01:21,870 Quindi questo è ciò che è ora memorizzato nei prodotti e quindi qui nella lista 18 00:01:21,880 --> 00:01:28,870 piatta, possiamo ovviamente impostare il puntello dei dati uguale ai nostri prodotti qui che abbiamo selezionato perché sarà un array ed è 19 00:01:28,870 --> 00:01:31,790 esattamente ciò di cui i dati hanno bisogno. 20 00:01:31,810 --> 00:01:36,730 Aggiungerò anche l'estrattore di chiave qui, a seconda della versione di React Native che stai utilizzando, non 21 00:01:36,790 --> 00:01:43,450 ti servirà perché ogni prodotto nella nostra app ha un ID e anche le versioni più recenti dell'elenco piatto cercano ID e non 22 00:01:43,450 --> 00:01:49,900 solo una chiave, ma nel caso in cui lavori con una versione precedente, devi impostare questa funzione di estrazione chiavi e questa richiede 23 00:01:49,900 --> 00:01:51,940 una funzione che ti dà l'oggetto che 24 00:01:51,940 --> 00:01:56,230 sta guardando e devi dirgli quale dovrebbe essere la tua chiave unica su quella oggetto 25 00:01:56,230 --> 00:02:00,100 e ovviamente quello è oggetto. id, ancora una volta, 26 00:02:00,160 --> 00:02:07,410 le nuove versioni di React Native non ne hanno bisogno. Ora, con ciò, dobbiamo anche fornire l'elemento di rendering 27 00:02:07,410 --> 00:02:14,720 dell'elemento di rendering che punta a una funzione che rende i nostri diversi elementi dell'elenco e qui, inizierò semplice 28 00:02:14,720 --> 00:02:21,650 e lo perfezioneremo in seguito e per il momento, importerò il componente di testo da React Native e 29 00:02:21,650 --> 00:02:25,590 genera il titolo del prodotto in un componente di testo. 30 00:02:25,610 --> 00:02:31,580 Quindi qui, otteniamo i nostri dati dell'articolo e il valore di ritorno di quella funzione che dobbiamo 31 00:02:31,580 --> 00:02:33,580 fornire per rendere l'articolo dovrebbe restituire 32 00:02:33,900 --> 00:02:35,780 un elemento jsx alla fine. 33 00:02:35,810 --> 00:02:42,890 Quindi qui restituirò un elemento di testo e lì, output itemData. articolo. titolo e posso farlo perché i dati 34 00:02:42,890 --> 00:02:48,680 degli articoli sono ricevuti da React Native, questo ha un oggetto prop, questo è anche qualcosa che React Native 35 00:02:48,680 --> 00:02:53,000 ti dà e ogni articolo qui ovviamente è solo un articolo nei nostri prodotti, 36 00:02:53,000 --> 00:02:58,640 quindi quindi è di questo tipo di dati e quindi ha un supporto per il titolo ovviamente perché 37 00:02:58,640 --> 00:02:59,830 è quello che 38 00:02:59,960 --> 00:03:05,300 sto assegnando qui, quindi avremo un supporto per il titolo qui che posso produrre e, naturalmente, questa 39 00:03:05,300 --> 00:03:10,100 non è la forma finale di come dovrebbe apparire un prodotto l'elenco ma è quello 40 00:03:10,100 --> 00:03:16,900 che uso per iniziare in modo da vedere qualcosa sullo schermo. Detto questo, parlando dello schermo, è ovviamente tempo di impostare il 41 00:03:16,900 --> 00:03:20,920 navigatore in modo che possiamo davvero vedere qualcosa sullo schermo e che abbiamo schermi. 42 00:03:21,160 --> 00:03:28,240 Quindi qui nella cartella di navigazione, aggiungerò il mio ShopNavigator. js file e lì, aggiungeremo un sacco di 43 00:03:28,240 --> 00:03:36,020 navigazione in questo modulo, quindi dovremo sicuramente importare dalla navigazione React e ovviamente inizierò semplice con un normale navigatore 44 00:03:36,050 --> 00:03:42,470 dello stack che possiamo creare con l'aiuto del crea la funzione Stack Navigator e poi 45 00:03:42,470 --> 00:03:48,740 la creeremo semplicemente qui e la chiamerò Navigator dei prodotti, ecco cosa memorizzo qui, il 46 00:03:48,860 --> 00:03:50,280 risultato di creare Stack 47 00:03:50,420 --> 00:03:51,700 Navigator e 48 00:03:51,710 --> 00:03:57,320 il risultato è un componente React se ricordi e se ricordi anche , 49 00:03:57,320 --> 00:04:03,800 create stack navigator accetta un oggetto Javascript come primo argomento in cui mappiamo gli identificatori di 50 00:04:03,860 --> 00:04:08,710 schermate ai componenti di React che devono essere caricati come schermate. 51 00:04:08,810 --> 00:04:16,040 Quindi, ovviamente, inizierò con la schermata di panoramica dei prodotti e li importerò dalla cartella delle schermate e 52 00:04:16,040 --> 00:04:23,930 lì dalla parte dello shop e lì dal file della schermata di panoramica dei prodotti e quindi la prima cosa che 53 00:04:24,020 --> 00:04:26,120 voglio mappare in questo navigatore dello 54 00:04:26,120 --> 00:04:33,630 stack qui sono i prodotti panoramica o comunque si desideri nominare questo, che è mappato alla schermata di panoramica 55 00:04:33,640 --> 00:04:34,800 dei prodotti. 56 00:04:34,790 --> 00:04:41,510 Ora, ovviamente, per questo stack navigator che alla fine avrà più schermate, passerò anche un secondo argomento per creare 57 00:04:41,510 --> 00:04:46,790 stack navigator che è un oggetto che ci consente di configurare l'intero navigatore e lì 58 00:04:47,180 --> 00:04:52,550 possiamo ad esempio impostare le opzioni di navigazione predefinite per ogni schermata e lì, voglio 59 00:04:52,550 --> 00:04:56,660 impostare il mio colore di sfondo dell'intestazione e così via. 60 00:04:57,350 --> 00:05:05,060 Quindi qui imposterò un oggetto Javascript in cui posso impostare lo stile dell'intestazione su un altro oggetto Javascript in cui possiamo impostare il colore 61 00:05:05,060 --> 00:05:09,620 di sfondo su qualsiasi colore di tua scelta ed è qui che entrerà in 62 00:05:09,620 --> 00:05:16,000 gioco la cartella delle costanti, dove aggiungerò un colore. file js, dove voglio semplicemente esportare un oggetto 63 00:05:16,010 --> 00:05:23,330 Javascript predefinito con un colore primario e un colore di accento e puoi nominare questi tasti come vuoi 64 00:05:23,330 --> 00:05:25,760 e ora ho selezionato alcuni 65 00:05:25,760 --> 00:05:30,730 bei colori che voglio usare qui ma puoi usare qualsiasi colore tu volere. 66 00:05:30,920 --> 00:05:42,890 Il mio colore principale avrà un codice esadecimale di # c2185b e il colore accento ha un 67 00:05:42,890 --> 00:05:46,940 codice esadecimale di # ffc107. 68 00:05:47,130 --> 00:05:52,920 Ora quindi nel navigatore del negozio, possiamo importare da quella cartella delle costanti, sempre dai colori che troviamo 69 00:05:54,020 --> 00:06:00,230 nella cartella delle costanti in questo modo e quindi qui, il colore di sfondo che imposterò per uno stile di 70 00:06:00,230 --> 00:06:04,240 intestazione qui è i colori. primario. 71 00:06:04,250 --> 00:06:07,470 Ora con quello aggiunto, aggiungerò anche 72 00:06:07,530 --> 00:06:15,630 un colore di intestazione che colora il testo del titolo per esempio e lo imposterò su bianco perché 73 00:06:16,470 --> 00:06:24,900 questo colore primario che ho impostato è come un colore rosa-rossastro piuttosto forte e quindi il bianco è il 74 00:06:24,900 --> 00:06:33,080 colore che dovremmo usare in modo che sia chiaramente leggibile e in realtà voglio differire su come appare 75 00:06:33,080 --> 00:06:37,110 l'intestazione in base alla piattaforma su cui stiamo girando. 76 00:06:37,160 --> 00:06:44,450 Quindi è il momento di importare la piattaforma da React Native e una nota a margine qui, in questa app pratica, in 77 00:06:44,450 --> 00:06:49,700 realtà non mi concentrerò troppo sulle differenze della piattaforma e sul design reattivo, lo farò 78 00:06:49,700 --> 00:06:55,160 in una certa misura in modo che ci sia una differenza fondamentale tra le diverse piattaforme 79 00:06:55,190 --> 00:06:58,580 e che l'app ha un bell'aspetto su dispositivi di 80 00:06:58,790 --> 00:07:02,630 dimensioni diverse, ma non lo testerò su un'ampia varietà di dispositivi. 81 00:07:02,660 --> 00:07:06,910 Hai imparato tutto il necessario per renderlo il più reattivo possibile, 82 00:07:06,980 --> 00:07:12,230 quindi sentiti libero di modificare sempre più di quello che faccio qui in questo modulo. 83 00:07:12,230 --> 00:07:16,710 Alla fine voglio solo assicurarmi che questo modulo non richieda centinaia di ore, 84 00:07:16,730 --> 00:07:19,250 quindi quindi lo terrò al minimo. 85 00:07:19,250 --> 00:07:24,080 Con questo set, la piattaforma qui sembra essere importante per me perché voglio davvero avere un aspetto 86 00:07:24,440 --> 00:07:28,790 diverso sull'intestazione in base al fatto che siamo in esecuzione su iOS o Android. 87 00:07:28,790 --> 00:07:34,940 Quindi il colore di sfondo in realtà non è sempre il colore principale ma invece lo imposterò solo 88 00:07:34,940 --> 00:07:38,320 se il sistema operativo su cui stiamo eseguendo è Android, 89 00:07:38,360 --> 00:07:43,820 altrimenti imposterò il colore di sfondo su una stringa vuota, il che significa che verrà utilizzato 90 00:07:43,820 --> 00:07:45,540 il valore predefinito e 91 00:07:45,570 --> 00:07:47,420 quindi per il colore della 92 00:07:47,450 --> 00:07:54,780 tinta dell'intestazione, anche questo dovrebbe essere bianco se siamo su Android, altrimenti non lo imposterò su una stringa vuota ma invece, 93 00:07:54,780 --> 00:07:57,720 voglio usare il colore primario come colore del 94 00:07:57,720 --> 00:08:04,150 testo su iOS, quindi se non siamo su Android. Con ciò, viene impostato il navigatore prodotti. 95 00:08:04,200 --> 00:08:09,240 Ora, come hai appreso nel modulo di navigazione, non esporti questo navigatore, ma lo avvolgi 96 00:08:09,240 --> 00:08:14,940 in un contenitore di app che crei con la funzione di creazione del contenitore di app che 97 00:08:14,940 --> 00:08:16,970 ottieni dalla navigazione di React. 98 00:08:16,980 --> 00:08:24,510 Quindi qui ora possiamo esportare il contenitore di app di creazione predefinito e passare il navigatore prodotti, in questo modo. 99 00:08:24,510 --> 00:08:27,510 Questa è ora la configurazione della navigazione di esportazione ed è ciò 100 00:08:27,630 --> 00:08:30,240 che ora possiamo usare nell'app. js. 101 00:08:30,510 --> 00:08:37,260 Quindi in app. js, ora possiamo importare il nostro navigatore del negozio dalla 102 00:08:39,770 --> 00:08:46,700 navigazione, navigatore del negozio e questo è quello che uso qui all'interno dei tag del mio provider qui, quindi 103 00:08:46,700 --> 00:08:52,670 il navigatore del negozio in questo modo. Questo significa anche che possiamo sbarazzarci di queste importazioni di React 104 00:08:52,700 --> 00:09:00,020 Native perché non usiamo più nessuno di questi componenti di React Native in questo componente. Con tutto questo lavoro, ora dovremmo essere in 105 00:09:00,020 --> 00:09:07,130 grado di eseguire effettivamente la nostra app e, auspicabilmente, accedere alla schermata di panoramica dei prodotti in 106 00:09:07,130 --> 00:09:12,390 cui viene visualizzato un elenco di base non definito dei titoli dei prodotti. 107 00:09:12,470 --> 00:09:17,840 Quindi, se lo salvo ora, salva tutte queste modifiche e ti assicuri di avere npm che inizia 108 00:09:17,840 --> 00:09:20,520 a funzionare e di avere emulatori attivi 109 00:09:20,870 --> 00:09:26,980 e funzionanti dove l'hai caricato, ricevo un errore che l'oggetto non è un costruttore, valutando il nuovo prodotto predefinito. 110 00:09:26,980 --> 00:09:35,270 Il problema dovrebbe essere che nella cartella del mio modello qui ho dimenticato di esportare la mia classe di prodotto come predefinita. 111 00:09:35,300 --> 00:09:36,970 Questo ovviamente deve essere aggiunto 112 00:09:36,980 --> 00:09:39,250 qui, altrimenti non è possibile importare da 113 00:09:39,290 --> 00:09:40,640 questo file, ha senso. 114 00:09:40,640 --> 00:09:42,670 Quindi ora funziona e ora effettivamente 115 00:09:42,740 --> 00:09:44,780 qui, vedo i titoli dei miei prodotti. 116 00:09:44,780 --> 00:09:46,420 Vediamo anche le diverse intestazioni, ciò che 117 00:09:46,430 --> 00:09:51,500 non vediamo è un titolo di intestazione perché non ne ho aggiunto nessuno. Quindi nella schermata di panoramica dei 118 00:09:51,500 --> 00:09:57,770 prodotti, possiamo ovviamente aggiungere alla nostra schermata speciale solo le opzioni di navigazione che verranno unite alle 119 00:09:57,770 --> 00:10:04,490 opzioni di navigazione predefinite che abbiamo impostato direttamente sul navigatore utilizzando la schermata di panoramica dei prodotti, la 120 00:10:04,490 --> 00:10:10,050 nostra costante qui che contiene il nostro componente e aggiungendo il proprietà delle opzioni di 121 00:10:10,070 --> 00:10:17,870 navigazione e qui possiamo usare le opzioni di navigazione statica per il momento, aggiungere un titolo di intestazione e impostarlo su 122 00:10:17,870 --> 00:10:19,630 tutti i prodotti per 123 00:10:19,810 --> 00:10:24,470 esempio e se ora lo salviamo, vediamo tutti i prodotti qui nell'intestazione. 124 00:10:24,680 --> 00:10:28,870 Quindi ora questo sembra decente, possiamo vedere i nostri prodotti. 125 00:10:28,970 --> 00:10:32,720 Naturalmente questi prodotti non sembrano proprio come dovrebbero apparire, quindi il 126 00:10:32,720 --> 00:10:38,810 prossimo passo sarà quello di assicurarci che qui otteniamo effettivamente l'aspetto di cui abbiamo bisogno in questa applicazione.