Quindi andrò alla schermata di panoramica del prodotto perché prima di aggiungere un
navigatore, voglio essere in grado di
vedere almeno qualcosa su quella schermata e quindi qui, ora dobbiamo importare utilizzare il selettore da React Redux perché ciò ci permetterà di
accedere al negozio Redux e ottenere i nostri prodotti da lì.
Quindi qui alla fine quello che possiamo fare è poter ottenere i nostri prodotti e archiviarli in prodotti
costanti chiamando il selettore d'uso e,
come hai appreso nel modulo precedente sulla gestione dello stato in Redux, usa il selettore accetta una funzione
che riceve automaticamente lo stato , lo stato Redux come input e che quindi restituisce tutti i dati che vuoi ottenere
da lì e
lì nello stato Redux,
voglio toccare la sezione dei miei prodotti e devi usare il nome che usi qui nei riduttori combinati per
ottenere questo stato, i dati gestiti con i prodotti per l'utente.
Quindi qui dirò prodotti di stato e ora in quella fetta del nostro stato, voglio ottenere
prodotti disponibili, quindi prendiamo. prodotti disponibili qui e questa è
questa sintassi della funzione freccia corta in cui viene restituita automaticamente la parte sul lato
destro della freccia.
Quindi questo è ciò che è ora memorizzato nei prodotti e quindi qui nella lista
piatta, possiamo ovviamente impostare il puntello dei dati uguale ai nostri prodotti qui che abbiamo selezionato perché sarà un array ed è
esattamente ciò di cui i dati hanno bisogno.
Aggiungerò anche l'estrattore di chiave qui, a seconda della versione di React Native che stai utilizzando, non
ti servirà perché ogni prodotto nella nostra app ha un ID e anche le versioni più recenti dell'elenco piatto cercano ID e non
solo una chiave, ma nel caso in cui lavori con una versione precedente, devi impostare questa funzione di estrazione chiavi e questa richiede
una funzione che ti dà l'oggetto che
sta guardando e devi dirgli quale dovrebbe essere la tua chiave unica su quella oggetto
e ovviamente quello è oggetto. id, ancora una volta,
le nuove versioni di React Native non ne hanno bisogno. Ora, con ciò, dobbiamo anche fornire l'elemento di rendering
dell'elemento di rendering che punta a una funzione che rende i nostri diversi elementi dell'elenco e qui, inizierò semplice
e lo perfezioneremo in seguito e per il momento, importerò il componente di testo da React Native e
genera il titolo del prodotto in un componente di testo.
Quindi qui, otteniamo i nostri dati dell'articolo e il valore di ritorno di quella funzione che dobbiamo
fornire per rendere l'articolo dovrebbe restituire
un elemento jsx alla fine.
Quindi qui restituirò un elemento di testo e lì, output itemData. articolo. titolo e posso farlo perché i dati
degli articoli sono ricevuti da React Native, questo ha un oggetto prop, questo è anche qualcosa che React Native
ti dà e ogni articolo qui ovviamente è solo un articolo nei nostri prodotti,
quindi quindi è di questo tipo di dati e quindi ha un supporto per il titolo ovviamente perché
è quello che
sto assegnando qui, quindi avremo un supporto per il titolo qui che posso produrre e, naturalmente, questa
non è la forma finale di come dovrebbe apparire un prodotto l'elenco ma è quello
che uso per iniziare in modo da vedere qualcosa sullo schermo. Detto questo, parlando dello schermo, è ovviamente tempo di impostare il
navigatore in modo che possiamo davvero vedere qualcosa sullo schermo e che abbiamo schermi.
Quindi qui nella cartella di navigazione, aggiungerò il mio ShopNavigator. js file e lì, aggiungeremo un sacco di
navigazione in questo modulo, quindi dovremo sicuramente importare dalla navigazione React e ovviamente inizierò semplice con un normale navigatore
dello stack che possiamo creare con l'aiuto del crea la funzione Stack Navigator e poi
la creeremo semplicemente qui e la chiamerò Navigator dei prodotti, ecco cosa memorizzo qui, il
risultato di creare Stack
Navigator e
il risultato è un componente React se ricordi e se ricordi anche ,
create stack navigator accetta un oggetto Javascript come primo argomento in cui mappiamo gli identificatori di
schermate ai componenti di React che devono essere caricati come schermate.
Quindi, ovviamente, inizierò con la schermata di panoramica dei prodotti e li importerò dalla cartella delle schermate e
lì dalla parte dello shop e lì dal file della schermata di panoramica dei prodotti e quindi la prima cosa che
voglio mappare in questo navigatore dello
stack qui sono i prodotti panoramica o comunque si desideri nominare questo, che è mappato alla schermata di panoramica
dei prodotti.
Ora, ovviamente, per questo stack navigator che alla fine avrà più schermate, passerò anche un secondo argomento per creare
stack navigator che è un oggetto che ci consente di configurare l'intero navigatore e lì
possiamo ad esempio impostare le opzioni di navigazione predefinite per ogni schermata e lì, voglio
impostare il mio colore di sfondo dell'intestazione e così via.
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
di sfondo su qualsiasi colore di tua scelta ed è qui che entrerà in
gioco la cartella delle costanti, dove aggiungerò un colore. file js, dove voglio semplicemente esportare un oggetto
Javascript predefinito con un colore primario e un colore di accento e puoi nominare questi tasti come vuoi
e ora ho selezionato alcuni
bei colori che voglio usare qui ma puoi usare qualsiasi colore tu volere.
Il mio colore principale avrà un codice esadecimale di # c2185b e il colore accento ha un
codice esadecimale di # ffc107.
Ora quindi nel navigatore del negozio, possiamo importare da quella cartella delle costanti, sempre dai colori che troviamo
nella cartella delle costanti in questo modo e quindi qui, il colore di sfondo che imposterò per uno stile di
intestazione qui è i colori. primario.
Ora con quello aggiunto, aggiungerò anche
un colore di intestazione che colora il testo del titolo per esempio e lo imposterò su bianco perché
questo colore primario che ho impostato è come un colore rosa-rossastro piuttosto forte e quindi il bianco è il
colore che dovremmo usare in modo che sia chiaramente leggibile e in realtà voglio differire su come appare
l'intestazione in base alla piattaforma su cui stiamo girando.
Quindi è il momento di importare la piattaforma da React Native e una nota a margine qui, in questa app pratica, in
realtà non mi concentrerò troppo sulle differenze della piattaforma e sul design reattivo, lo farò
in una certa misura in modo che ci sia una differenza fondamentale tra le diverse piattaforme
e che l'app ha un bell'aspetto su dispositivi di
dimensioni diverse, ma non lo testerò su un'ampia varietà di dispositivi.
Hai imparato tutto il necessario per renderlo il più reattivo possibile,
quindi sentiti libero di modificare sempre più di quello che faccio qui in questo modulo.
Alla fine voglio solo assicurarmi che questo modulo non richieda centinaia di ore,
quindi quindi lo terrò al minimo.
Con questo set, la piattaforma qui sembra essere importante per me perché voglio davvero avere un aspetto
diverso sull'intestazione in base al fatto che siamo in esecuzione su iOS o Android.
Quindi il colore di sfondo in realtà non è sempre il colore principale ma invece lo imposterò solo
se il sistema operativo su cui stiamo eseguendo è Android,
altrimenti imposterò il colore di sfondo su una stringa vuota, il che significa che verrà utilizzato
il valore predefinito e
quindi per il colore della
tinta dell'intestazione, anche questo dovrebbe essere bianco se siamo su Android, altrimenti non lo imposterò su una stringa vuota ma invece,
voglio usare il colore primario come colore del
testo su iOS, quindi se non siamo su Android. Con ciò, viene impostato il navigatore prodotti.
Ora, come hai appreso nel modulo di navigazione, non esporti questo navigatore, ma lo avvolgi
in un contenitore di app che crei con la funzione di creazione del contenitore di app che
ottieni dalla navigazione di React.
Quindi qui ora possiamo esportare il contenitore di app di creazione predefinito e passare il navigatore prodotti, in questo modo.
Questa è ora la configurazione della navigazione di esportazione ed è ciò
che ora possiamo usare nell'app. js.
Quindi in app. js, ora possiamo importare il nostro navigatore del negozio dalla
navigazione, navigatore del negozio e questo è quello che uso qui all'interno dei tag del mio provider qui, quindi
il navigatore del negozio in questo modo. Questo significa anche che possiamo sbarazzarci di queste importazioni di React
Native perché non usiamo più nessuno di questi componenti di React Native in questo componente. Con tutto questo lavoro, ora dovremmo essere in
grado di eseguire effettivamente la nostra app e, auspicabilmente, accedere alla schermata di panoramica dei prodotti in
cui viene visualizzato un elenco di base non definito dei titoli dei prodotti.
Quindi, se lo salvo ora, salva tutte queste modifiche e ti assicuri di avere npm che inizia
a funzionare e di avere emulatori attivi
e funzionanti dove l'hai caricato, ricevo un errore che l'oggetto non è un costruttore, valutando il nuovo prodotto predefinito.
Il problema dovrebbe essere che nella cartella del mio modello qui ho dimenticato di esportare la mia classe di prodotto come predefinita.
Questo ovviamente deve essere aggiunto
qui, altrimenti non è possibile importare da
questo file, ha senso.
Quindi ora funziona e ora effettivamente
qui, vedo i titoli dei miei prodotti.
Vediamo anche le diverse intestazioni, ciò che
non vediamo è un titolo di intestazione perché non ne ho aggiunto nessuno. Quindi nella schermata di panoramica dei
prodotti, possiamo ovviamente aggiungere alla nostra schermata speciale solo le opzioni di navigazione che verranno unite alle
opzioni di navigazione predefinite che abbiamo impostato direttamente sul navigatore utilizzando la schermata di panoramica dei prodotti, la
nostra costante qui che contiene il nostro componente e aggiungendo il proprietà delle opzioni di
navigazione e qui possiamo usare le opzioni di navigazione statica per il momento, aggiungere un titolo di intestazione e impostarlo su
tutti i prodotti per
esempio e se ora lo salviamo, vediamo tutti i prodotti qui nell'intestazione.
Quindi ora questo sembra decente, possiamo vedere i nostri prodotti.
Naturalmente questi prodotti non sembrano proprio come dovrebbero apparire, quindi il
prossimo passo sarà quello di assicurarci che qui otteniamo effettivamente l'aspetto di cui abbiamo bisogno in questa applicazione.