Assicuriamoci di poter andare alla schermata dei dettagli del prodotto, questa schermata
qui e per prima cosa nel componente della schermata
dei dettagli del prodotto, quindi creerò un componente importando
React da React. Quindi, probabilmente
abbiamo anche bisogno di alcune cose da React Native, ad esempio non può davvero
far male avere una vista e un testo qui e anche un foglio di stile
e anche il componente dell'immagine, a proposito dell'ordine di queste importazioni qui ovviamente non importa.
Voglio anche avere un pulsante lì perché voglio avere un pulsante Aggiungi al carrello anche qui
e in realtà anche una vista di scorrimento perché questa pagina di dettaglio potrebbe avere una descrizione del prodotto molto lunga o potrebbe essere visualizzata
su un dispositivo molto piccolo e pertanto, dovrebbe essere sicuramente scorrevole in modo da poter
sempre vedere tutto il contenuto. Con questo qui, aggiungerò
il componente della schermata dei dettagli del mio prodotto, di nuovo un componente funzionale in cui riceviamo oggetti di scena, imposterò il mio
foglio di stile qui con il foglio di stile. crearlo e memorizzarlo in una costante di stili
e, naturalmente, esportare la schermata dei dettagli del prodotto come predefinita. Detto questo, iniziamo semplice e restituiamo una vista qui con un
testo in cui diciamo la schermata dei dettagli del prodotto che è proprio lì in modo che possiamo vedere che abbiamo navigato con successo lì e in
modo che possiamo effettivamente utilizzare questo perché dobbiamo restituire
jsx a avere un componente valido perché la prima cosa che voglio fare è regolare
la navigazione e per quello in ShopNavigator. file js nella cartella di navigazione, possiamo
importare la schermata dei dettagli del
prodotto qui dalla nostra cartella delle schermate, la cartella del negozio e lì la schermata dei dettagli del prodotto, quindi questo è il
file
in cui abbiamo appena lavorato ovviamente e mapparlo qui su un identificatore, io ' lo chiamerò qui i
dettagli del prodotto.
Questi tasti come hai appreso nella sezione di navigazione dipendono sempre da
te, quindi ora abbiamo mappato questa schermata.
Questa sarà la nostra schermata iniziale perché questa è la
prima coppia chiave-valore, questa è una schermata a cui possiamo andare però, possiamo navigare e
andare lì, dobbiamo andare alla schermata panoramica dei nostri prodotti e quando facciamo clic su Visualizza dettaglio, questo è alla
fine il segnale che vogliamo andare alla schermata dei dettagli di quel prodotto.
Quindi qui in questa funzione, possiamo chiamare la navigazione di oggetti di scena, questa funzione di navigazione che hai appreso nella
sezione di navigazione e poi lì, ti
ho mostrato una sintassi in cui passi un oggetto Javascript in cui hai
impostato un nome di rotta, che potrebbe essere dettagli del prodotto e questo ti porterà sullo schermo.
Quindi ora lo salviamo e
facciamo clic su Visualizza dettagli, infatti andiamo alla schermata dei dettagli del prodotto. Ora, come annotazione nella sezione di navigazione, ti ho
anche
mostrato che la sintassi alternativa è che passi il nome della schermata come primo argomento da
navigare, quindi puoi farlo
anche tu e funzionerà come bene. Se lo testiamo anche su
Android, ecco come possiamo andare lì.
Ora ovviamente l'obiettivo non è solo quello di andare lì, ma anche di inoltrare i nostri dati o il nostro ID del prodotto almeno in modo
da poter caricare i dati del prodotto all'interno del componente. Quindi come secondo argomento qui, passo un oggetto Javascript che
sarà il mio parametro per questa azione di navigazione e lì puoi avere tutte le
coppie chiave-valore che desideri, aggiungerò qui un campo ID prodotto, di nuovo questo nome è totalmente dipende da te
e questo sarà itemData. articolo. id perché itemData. l'articolo punta su
un singolo prodotto che ha l'aspetto che abbiamo impostato qui nei modelli e questo ha un
ID ID, quindi ovviamente possiamo accedervi qui e inoltrarlo. Detto questo, nella schermata dei dettagli del prodotto, possiamo
estrarlo ovviamente, è anche qualcosa che hai imparato in precedenza e che puoi semplicemente praticare qui.
Possiamo ottenere il nostro ID prodotto qui semplicemente chiamando la navigazione di oggetti di scena ottenendo l'ID prodotto param e questo
estrarrà il nostro ID prodotto dai parametri che abbiamo ricevuto.
Ora possiamo usare quell'ID per ottenere il nostro prodotto e ovviamente i nostri prodotti sono archiviati in Redux.
Quindi alla fine dobbiamo importare il selettore di utilizzo qui da React Redux, in modo che possiamo usarlo per selezionare
un singolo prodotto,
diciamo il nostro prodotto selezionato, questo nome costante è ovviamente anche a te, ora è selezionato con l'aiuto del
selettore di utilizzo che riceve il nostro stato, il nostro stato Redux e quindi possiamo eseguire il
drill nella sezione prodotti, ancora una volta quel nome della sezione è quello che usi qui nei prodotti di riduttori combinati nel mio caso e
lì possiamo ottenere un accesso a tutti i prodotti
disponibili ma di ovviamente qui non voglio caricare tutti i prodotti disponibili ma
invece, posso usare il metodo find per trovare un singolo prodotto con quella funzione che passo per trovare che gira su ogni
articolo dell'array dove otteniamo il prodotto dove questa funzione restituisce true e dovrebbe restituire true se l'ID
del prodotto che sto guardando è uguale all'ID prodotto che ho estratto dai parametri del percorso.
Questo è il modo in cui selezioniamo un singolo prodotto e questo singolo prodotto può quindi essere
utilizzato qui, quindi qui potremmo produrre il prodotto selezionato. titolo per esempio. Se ora lo salviamo e visualizziamo i dettagli, anzi
qui vedo
la camicia rossa, se lo faccio per il tappeto blu, vedo qui
il tappeto blu, quindi funziona. Sarebbe bello vedere che
anche nell'intestazione
e ci sono due opzioni, ora potremmo usare gli oggetti di scena. set di navigazione param qui e avvolgi anche questo nel richiamo dell'effetto use, sarebbe meglio
impostare il nostro
titolo con set param e usarlo qui nelle opzioni di navigazione che dobbiamo aggiungere ai dettagli dei prodotti per estrarlo
o effettivamente un po ' più facile, andiamo alla panoramica del prodotto che è dove andiamo a
quella pagina e oltre a passare l'ID del prodotto, passiamo anche il titolo del
prodotto perché qui lo abbiamo facilmente disponibile e lo otteniamo con l'aiuto
di itemData. articolo. titolo.
Ora impostiamo anche questo parametro e questo rende semplicissimo estrarlo nella schermata dei
dettagli del prodotto, lì nelle opzioni di navigazione, possiamo solo ora aggiungere opzioni di navigazione
nella schermata dei dettagli del prodotto e questo è ora il modulo funzionale perché dobbiamo estrarre questo
in modo dinamico dai nostri parametri di rotta. Quindi qui otteniamo questo oggetto dati di navigazione che
ha anche un supporto di navigazione, dobbiamo restituire il nostro oggetto Javascript, le nostre opzioni di navigazione configurano l'oggetto qui, queste dovrebbero
essere opzioni ovviamente e lì, possiamo impostare il titolo dell'intestazione su navData. navigazione. Titolo del prodotto getParam o qualunque cosa tu
abbia scelto come identificatore per questo.
Quindi qui sto usando il titolo del prodotto perché nella schermata di panoramica del prodotto, lo sto impostando sul titolo del prodotto.
Detto questo, stiamo impostando questa intestazione, vediamo se funziona, se proviamo ad andare a quella
schermata, sembra
buono, ora vediamo anche il titolo del prodotto qui nell'intestazione. Funziona.
Ora ho accennato in precedenza che non dovremmo essere in grado di andare
lì premendo i dettagli di visualizzazione,
ma forse anche premendo il prodotto in generale e per questo, possiamo andare all'elemento del prodotto
e lì ovviamente abbiamo il pulsante Visualizza dettagli ma
ora possiamo avvolgere l'intero oggetto in modo tangibile e lì possiamo usare l'opacità tangibile e avvolgere l'intero oggetto con opacità tangibile, quindi avvolgi questo intorno alla nostra
intera vista qui, questi pulsanti saranno ancora attivati autonomamente
ma ora possiamo anche premere altrove e lì su Stampa, ora voglio anche
attivare
lo stesso, il pulsante Visualizza dettagli lo fa, voglio attivare la funzione che riceviamo sui dettagli
di visualizzazione, quindi lo inoltrerò semplicemente per visualizzare i dettagli. E che con quel semplice cambiamento, possiamo premere ovunque
su questo oggetto per essere portati alla schermata dei dettagli, anche su Android dove questo comunque sembra
un po 'brutto e in generale, sarebbe bello avere questo effetto a catena lì.
Ora hai anche imparato come implementarlo, dobbiamo
importare feedback nativi tangibili per questo e l'API della piattaforma, quindi questo oggetto piattaforma e ora qui nell'elemento
del prodotto, possiamo impostare il nostro componente toccabile qui o come vuoi nominarlo , dovrebbe avere un carattere maiuscolo in
modo che possiamo usarlo come elemento jsx e questo per impostazione predefinita indica
opacità tangibile diciamo ma
se il sistema operativo della piattaforma è uguale ad Android e la versione della piattaforma è maggiore o uguale a 21 che
è la versione Android dobbiamo supportare l'effetto
a catena, possiamo impostare un cmp tangibile uguale al feedback nativo tangibile e ora possiamo sostituire l'opacità tangibile laggiù con un cmp
tangibile,
quindi con quella variabile che contiene due diversi tipi
di componenti a seconda di dove sta funzionando e ora se fai questo, abbiamo
ancora quell'effetto di opacità qui ma abbiamo un effetto a catena su Android.
Tuttavia, solo laggiù, non sull'immagine e anche non rispettando i nostri angoli arrotondati, come puoi
vedere.
Ora per risolvere il problema che
non è presente nell'immagine, tutto quello che dobbiamo fare è cambiare
lì una configurazione, non ci resta che aggiungere qui il prop di utilizzo in primo piano.
Ora sull'opacità toccabile, questo non avrà alcun effetto ma sul feedback nativo toccabile, questo assicura che
l'effetto ondulazione non si applica allo sfondo ma in realtà al primo piano, il che
significa anche agli elementi che sono posizionati sopra il nostro toccabile o all'interno di il nostro componente toccabile.
Quindi quindi ora, questo è anche sull'immagine e per rispettare gli angoli, gli angoli arrotondati, lo
farò in modo un
po 'diverso, aggiungerò un componente toccabile all'interno della mia vista circostante invece che all'esterno, come
quello e ora qui aggiungerò un overflow nascosto su quello stile di prodotto che è in quella vista che
ora è attorno al mio componente tangibile. Con ciò, tuttavia, la mia ombra si perde come puoi
dire e qui ora ricevo anche un errore che mi serve un singolo figlio di React. Quindi effettivamente modificarlo un po 'e aggiungiamo
una vista extra qui, una vista extra che avvolge tutto, il mio
intero componente toccabile all'interno di quella vista esterna e su quella vista extra, aggiungerò uno stile di stili toccabili o
altro vuoi nominarlo e questo stile toccabile è ora aggiunto qui nel mio foglio di stile.
Questo ora ottiene il puntello
nascosto di overflow, quindi aggiungiamo questo qui e questo ora riceve anche lo stesso raggio del bordo che abbiamo sull'intero
carrello, quindi un raggio del bordo di 10 qui e questo assicurerà ora di mantenere la nostra ombra, in modo che ancora funziona
perché l'overflow nascosto avrebbe ritagliato questo e ora anche per sbarazzarci di quell'altro errore qui,
possiamo semplicemente avvolgere ancora un'altra vista su tutto il contenuto all'interno del componente toccabile in modo da
soddisfare questi criteri di avere un solo elemento figlio nel componente toccabile e ora con quello,
abbiamo lo stesso comportamento di prima su iOS. Il carrello a proposito non attiva questa
navigazione dei dettagli che è buona e su Android, ora
abbiamo anche quell'effetto a catena che rispetta i nostri angoli arrotondati che ci
porta alla vista dei dettagli e al carrello non fa ciò che non dovrebbe .
Quindi, ora che abbiamo la navigazione di cui abbiamo bisogno,
abbiamo l'aspetto di cui abbiamo bisogno qui.
Ora possiamo andare alla pagina dei dettagli e ora dovremmo forse assicurarci che questa pagina dei dettagli appaia anche come dovrebbe
essere.