Quindi assicuriamoci che i nostri articoli di prodotto nella schermata di panoramica del prodotto abbiano un aspetto un po 'più
bello di quello che stanno attualmente guardando. Proprio ora ovviamente, ogni articolo del prodotto è
appena reso come testo, come componente di testo e non è quello che voglio qui, rimuoverò invece l'importazione e creerò un
nuovo componente che dovrebbe essere responsabile del mio articolo di prodotto.
Ora una nota importante relativa a dove creiamo quel componente, possiamo crearlo qui
nella Panoramica prodotti. Anche js file, possiamo ovviamente avere
più di un componente per file, quindi qui potrei aggiungere il mio componente dell'articolo del prodotto o comunque tu voglia chiamarlo,
come questo, quindi possiamo usare questo componente in questo file che è ovviamente cosa ho intenzione di fare.
Questo è un modello che puoi usare se hai un componente che è fortemente legato ad un altro componente e
lo stai solo dividendo in modo che ogni componente sia un po 'più leggibile.
Una volta che questi componenti separati diventano molto grandi, dovresti comunque considerare di dividerli in file separati in modo
che i tuoi file rimangano piccoli e se le persone vogliono dare un'occhiata a uno dei
due componenti, non devono scorrere sopra l'altro componente potrebbero non essere interessati a.
Quindi questa è una cosa da tenere a mente. Naturalmente, se prevedi anche di utilizzare un componente in
un altro componente, dovresti sempre memorizzarlo in un file separato, non solo in modo da poterlo esportare come predefinito perché potresti anche
esportarlo se è archiviato insieme a un altro componente, non è questo il
motivo principale, ma soprattutto per chiarire che si tratta di un componente autonomo che potrebbe e verrà utilizzato in
diverse parti della tua app.
Ora l'articolo del prodotto non solo non sarà super piccolo, il che da solo sarebbe un motivo per inserirlo in un
file separato, ma lo userò anche in un componente diverso in un secondo momento o in
luoghi diversi dell'app, non è solo pertinente alla schermata della panoramica dei prodotti e, quindi, lo aggiungerò nella cartella
dei componenti e nella cartella dei componenti, per organizzare un po 'i miei componenti, aggiungerò una sottocartella
del negozio in cui voglio posizionare tutti i componenti che sono direttamente correlato alla funzionalità del negozio o
alle funzionalità in generale della mia app.
Quindi, nella sottocartella del negozio, aggiungerò questo ProductItem. file js e vedrai quali altre cartelle
aggiungerò qui in seguito.
Ancora una volta, tutti questi schemi e pratiche che ti sto mostrando qui sono solo possibili modi per farlo, in
generale nei miei corsi e anche in questo corso, mostro tutte le migliori pratiche che puoi usare ma spesso in programmazione,
non c'è solo un modo giusto o sbagliato,
quindi le pratiche e i modelli che sto mostrando qui sono pratiche e modelli che vedrai anche in altri
progetti ma potresti anche vedere altre strutture di cartelle, alla fine puoi sempre lavorare con la struttura che
funziona per te, non c'è una scelta giusta o sbagliata qui, voglio solo spiegare il mio ragionamento per l'utilizzo di questa struttura che,
si spera, ti aiuta a capire perché lo uso e perché questo potrebbe valere la pena di pensarci.
Quindi qui, il file dell'articolo del prodotto, ProductItem. Il file js conterrà ovviamente il componente dell'articolo del prodotto che è un normale
componente funzionale che riceve oggetti di scena e alla fine restituirà il codice jsx e quindi
poiché contiene il codice jsx, dobbiamo importare React da React e qui, anche, importa cose da React Native perché qui ora
lavorerò con queste primitive React Native per costruire davvero il mio componente perché da lì, avrò bisogno della vista, avrò bisogno del
testo, voglio anche usare l'immagine perché noi ' Visualizzerò qui l'immagine del prodotto e
anche il foglio di stile perché sicuramente lo faremo anche noi. Quindi puoi anche aggiungere una costante di stili qui
che creiamo con il foglio di stile. creare a cui passiamo un oggetto Javascript
e, alla fine, esportiamo qui l'articolo del prodotto come predefinito, ovviamente. Ora qui, in questo componente intendo, possiamo iniziare a creare
il codice jsx che compone l'articolo del prodotto e questo sarà un componente di presentazione, il
che significa che non ci sarà alcuna logica qui, non gestiremo alcuno stato interno, questo sarà
solo un componente che possiamo usare in altri componenti per ottenere lo stile e il layout
giusti fuori dalla scatola, quindi questo componente sarà responsabile dell'uso di determinati componenti React Native, del loro layout
e del loro stile in un certo modo. Quindi qui, alla fine, voglio restituire una vista
che avvolge tutto, che organizza tutto, che possiamo anche modellare per ottenere questo carrello
con forse un'ombra discendente, forse angoli arrotondati, qualunque cosa tu voglia e lì dentro, ora hanno parti diverse, ad
esempio avremo sicuramente l'immagine lì dentro, l'immagine del prodotto, voglio anche avere il titolo e il prezzo, quindi avremo
bisogno di un testo qui, quindi per
il titolo qui e qui, quindi il per il prezzo in dollari e al di sotto di quello, voglio anche avere una vista con i
pulsanti, quindi qui possiamo usare
il componente pulsante incorporato per il momento, dove possiamo quindi aggiungere un prodotto al carrello o
anche visualizzare i dettagli , quindi dove abbiamo sostanzialmente queste due opzioni e ovviamente dovremo aggiungere i
gestori di Press qui. Quindi questo è lo scheletro di base,
probabilmente non quello finale, dovremo vedere come possiamo modellare tutto qui ma questo è
il layout che voglio.
In questo modo avvolgo i miei pulsanti in vista perché voglio averli fianco a fianco nella fila e
avendo una vista intorno a loro, possiamo modellare quella vista in modo tale che usi la riga di direzione flessibile
e così via.
Quindi
questa è una configurazione con
cui possiamo lavorare qui, ora aggiungiamo
un po 'di stile e per questo voglio usare
o iniziare qui nella vista circostante in cui ho impostato il prodotto stili come
questo, quindi qui nel foglio di stile, aggiungo un
prodotto del genere, aggiungo il mio codice
Product Key qui e ovviamente ora di nuovo, dipende da te come vuoi modellare questo, voglio che l'aspetto di quella carta, quindi aggiungerò un'ombra, un
colore dell'ombra che può essere nero, un'opacità dell'ombra che può essere 0. 26, un offset dell'ombra in cui ho l'offset della larghezza di zero e uno
offset dell'altezza di due e un raggio dell'ombra di otto forse e
come sempre giocare con questi valori per trovare la tua configurazione.
Ora potresti ricordare che l'ombra funziona solo su
iOS, quindi per Android aggiungerò qui la proprietà elevazione e la imposterò su cinque forse, ancora una volta puoi
sperimentare con valori diversi anche lì
e voglio avere un raggio di confine di 10 perché Voglio angoli arrotondati
e di nuovo, è
qualcosa che voglio qui, qualcosa che non devi fare. Aggiungerò anche un colore di sfondo bianco per assicurarmi che il
nostro carrello qui, il nostro prodotto abbia sempre questo colore di sfondo anche se la nostra app
principale dovrebbe utilizzare un colore di sfondo diverso in seguito. Questo è il mio prodotto, la mia confezione qui attorno all'intero prodotto. Voglio anche impostare la mia altezza qui, ogni
prodotto dovrebbe avere un'altezza di 300 pixel
e ovviamente questo è un valore che puoi anche modificare in base alle
tue esigenze.
Ovviamente potresti anche renderlo dinamico con l'API dimensioni come hai appreso nel modulo reattivo
e aggiungerò un margine di 20 in tutte le direzioni attorno a ciascun articolo del prodotto, in modo
da avere una spaziatura in tutte le direzioni. Con questa configurazione, possiamo iniziare a lavorare sull'output di qualcosa, quindi l'immagine
ha bisogno di una fonte e otterremo un'immagine di rete qui perché se dai un'occhiata ai dati
fittizi, tutti questi URL di immagini qui sono URL, è anche quello che nel modello, ci aspettiamo un URL
qui, quindi per
un'immagine di rete e questo sarebbe ovviamente il default per qualsiasi negozio che costruisci perché non includerai
mai tutte le immagini del prodotto nella tua app, almeno se non è presente in app shop per un gioco, ma se si tratta
di un negozio in cui le persone possono
creare prodotti, ovviamente le persone creeranno prodotti in modo dinamico dopo che l'app è stata distribuita,
quindi è impossibile per te includere tutte le immagini nella tua app, invece devono essere archiviate su un server .
Quindi quindi qui, abbiamo bisogno di passare un oggetto all'origine in cui impostiamo la proprietà URI
e che ora verrà ricevuto dall'esterno perché questo componente dell'articolo del prodotto è di presentazione,
quindi tutti i dati da visualizzare devono essere passati attraverso i puntelli e lì, noi potresti aspettarti il
puntello dell'immagine ma come per tutti i
puntelli nei tuoi componenti, puoi scegliere qualsiasi nome tu voglia. Per il titolo, mi aspetto di ottenere un titolo prop e per il prezzo, mi
aspetto di ottenere un prezzo prop, terrò il segno del dollaro qui a proposito perché il prezzo sarà solo un numero e ovviamente
voglio avere un simbolo del dollaro di fronte a questo.
Ora una piccola nota qui, voglio assicurarmi che il prezzo che ottengo abbia sempre esattamente due cifre decimali e possiamo ottenere
questo chiamando chiamando fisso su questo e passando in due. A fixed è una funzione disponibile sui
numeri in Javascript, che la converte sostanzialmente in una stringa con una quantità fissa di
posizioni decimali e qui limito questo per essere
sempre due
posizioni decimali, cioè Javascript normale, niente di specifico per React Native. Ora quando premiamo il pulsante Visualizza dettagli, attiverò i puntelli sui dettagli della vista,
quindi uso nuovamente un nome qui che puoi configurare o nominare come vuoi, ma l'idea qui è che i puntelli
sulla vista punti i dettagli in una funzione che in la fine viene eseguita
quando si preme questo pulsante e quindi qui, se
questo pulsante, il pulsante carrello viene premuto, indicherò una funzione che mi aspetto di ottenere sul prop Aggiungi al carrello.
Ancora
una volta, puoi nominare questi oggetti di scena come vuoi, ma quando usi
il tuo componente, devi assicurarti che siano disponibili e che ottengano valori che sono funzioni che poi vengono attivate attraverso questi pulsanti.
Ora stiamo ottenendo tutti i dati. Ora per l'immagine, poiché
questa è un'immagine di rete, dobbiamo impostare la larghezza e l'altezza perché l'immagine non può vederlo in anticipo
poiché potrebbe farlo per un'immagine locale, non può
farlo per una rete immagine, quindi qui indicherò gli stili. immagine e aggiungerò questa chiave immagine al mio foglio di stile lì per ora.
Ancora una volta, dipende generalmente da te come modellare questo, ma imposterò questo per avere una larghezza di
diciamo del
60%, tieni presente che il prodotto complessivo ha una larghezza del 100% ma un'altezza del 60% perché il prodotto complessivo l'articolo qui ha un'altezza
di 300 e voglio avere l'immagine lì dentro, che dovrebbe anche occupare la maggior parte dell'altezza ma ho anche
il titolo e il prezzo e i miei pulsanti e questi dovrebbero anche adattarsi lì dentro,
quindi io ' Darò
all'immagine il 60% dell'altezza in modo che
le altre cose qui possano dividere il restante 40% tra di loro. Quindi, quella è l'immagine, ora ovviamente l'immagine non è tutto
ciò che abbiamo qui, abbiamo anche il nostro titolo, abbiamo il nostro prezzo
e voglio anche modellare quello.
Quindi, per il titolo, aggiungerò lo stile del titolo qui e per il prezzo, aggiungerò diciamo uno
stile di prezzo e qui per questi pulsanti, aggiungerò anche uno stile alla vista circostante e lo chiamerò azioni e ovviamente
tutti questi nomi di stile come sempre sono totalmente a te. Qui, voglio aggiungere il mio
titolo, il prezzo e la proprietà actions al mio foglio di stile qui e ora per il titolo,
puoi ovviamente modellarlo nel modo che preferisci.
Non abbiamo caratteri personalizzati qui, ne
aggiungerò presto alcuni ma per il momento, lo ignorerò e
inizierò con una dimensione del carattere di 18 e voglio aggiungere un margine verticale, quindi sopra e sotto di
3 o 4, quindi un margine molto piccolo ma ancora un margine attorno a questo titolo. Per il prezzo, imposterò una dimensione del carattere di 14,
quindi un po 'più piccola e darò anche a questo un colore che dovrebbe essere forse 888 che
è come un colore grigiastro, grigio scuro.
Ora le azioni sono posizionate su quella vista che contiene i pulsanti e quindi, voglio assicurarmi che il pulsante
si trovi uno accanto all'altro, quindi in una riga.
Quindi darò a questo una direzione di riga flessibile qui e giustificherò anche il contenuto per avere tutto lo spazio rimanente tra di
loro e inoltre, voglio allineare gli elementi al centro verticalmente, quindi lungo l'asse trasversale che per una direzione
di flessione di riga è l'asse verticale.
Detto questo, abbiamo uno stile di base,
ora usiamo quel componente prima di perfezionare il set up e lo stile. Quindi il componente dell'articolo del prodotto che esportiamo
qui nel file dell'articolo del prodotto può ora essere utilizzato nel file di panoramica
del prodotto importando l'articolo del prodotto da
lì, quindi puntiamo alla nostra cartella dei componenti, lì nella sottocartella del negozio e quindi l'articolo del prodotto e
ora questo è quello che voglio usare qui quando eseguo il rendering dei miei articoli.
L'articolo del prodotto può essere un componente autochiudente perché tutti i dati vengono ricevuti attraverso oggetti di scena e
non tra i tag di apertura e chiusura,
ora ovviamente dobbiamo impostare tutto ciò che ci aspettiamo qui.
Ci aspettiamo qui un'immagine, il titolo, il prezzo e i nostri due oggetti di scena per la gestione degli eventi,
quindi è quello che dobbiamo fornire ora.
Quindi qui sull'articolo del prodotto,
inizierò con l'immagine e quello ovviamente è itemData. articolo. imageUrl e
devi sempre ricordare l'articolo ItemData. l'articolo indica un prodotto come definito nel nostro modello di prodotto e
pertanto avrà una proprietà imageUrl scritta in questo modo, se lo hai
scritto in modo diverso, devi ovviamente accedervi in modo diverso. Oltre all'immagine, avremo anche un
titolo che è itemData. articolo. titolo e oltre a ciò, avremo il prezzo
con itemData. articolo. prezzo
e quindi abbiamo i nostri due gestori di eventi qui perché abbiamo il puntello di dettaglio in vista e
il puntello di aggiunta al carrello che dobbiamo aggiungere. Quindi i dettagli a vista faranno qualcosa in seguito, per ora
è solo una funzione vuota e su aggiungi al carrello farà
anche qualcosa in seguito, per ora può anche
essere una funzione vuota, ecco come dovrebbe essere reso il nostro prodotto. Detto questo, se lo salviamo, questo è
ciò che dovresti vedere, non è ancora perfetto, ma
ci stiamo arrivando, in realtà non è poi così male.
Ora, naturalmente, ciò che noti è che i pulsanti sono colorati nel modo sbagliato, che questo spazio
non è realmente utilizzato nel modo in cui dovrebbe essere usato laggiù, che forse vogliamo
anche centrare questo testo ma queste sono ovviamente cose possiamo lavorarci su. Quindi, per perfezionarlo, torniamo al componente dell'articolo del prodotto qui, iniziamo
con i nostri due testi qui.
Dovrebbero ovviamente essere centrati e ciò può essere fatto in un modo molto semplice avvolgendolo con una vista,
spostando questi due testi lì dentro, dando a quella vista uno stile e ovviamente puoi nominarlo
come preferisci, lo
chiamerò i dettagli perché abbiamo un po 'di layout i dettagli del prodotto
lì, quindi aggiungerò il mio stile di dettagli qui al foglio di stile e lì, imposterò semplicemente allineare gli oggetti al centro.
Questo utilizza una direzione flessibile della colonna, il valore predefinito e quindi si centra sull'asse trasversale, lo fa sempre, ma
l'asse trasversale per la colonna della direzione flessibile è ovviamente da
sinistra a destra, quindi centra orizzontalmente che è quello che voglio qui e io ' Darò anche questo un altezza del 15%.
Tieni presente che l'immagine occupa il 60%, quindi diamo questo forse
il 15%, quindi quasi la metà del restante 40%, non proprio la metà
E aggiungerò un po 'di imbottitura qui del 10 forse.
E per i pulsanti qui, questi sono nella proprietà delle mie azioni, lì voglio
impostare l'altezza sul rimanente 25%, che dovrebbe essere una
stringa ovviamente perché qui abbiamo il 60% di altezza, quindi
qui abbiamo il
15%, quindi qui Voglio mantenere il restante 25% e se ora lo salviamo, sembra molto meglio.
Ora un po 'di padding a sinistra e a destra sarebbe anche
bello per i pulsanti, quindi su questa proprietà di stile delle azioni, aggiungerò forse un padding orizzontale di 20, in modo da avere una spaziatura
interna a sinistra oa destra. Ora per cambiare il colore
dei pulsanti, possiamo semplicemente andare ai componenti dei pulsanti che sono integrati in
React Native e impostare
qui il prop di colore sui colori che è quindi necessario importare dalla cartella delle
costanti e
dal file dei colori lì e impostare questo quindi ai colori primari, anche qui per il secondo colore, il pulsante Aggiungi al carrello, quindi il secondo pulsante.
Quindi ora abbiamo i
nostri pulsanti qui, aggiungi al carrello e visualizza i dettagli e questo non sembra male.
L'unica cosa che potresti notare è che non abbiamo angoli arrotondati qui in alto e
la ragione di ciò è che la nostra immagine è fondamentalmente come una sovrapposizione al nostro sfondo e lo sfondo
è la vista
circostante, l'immagine non ha angoli arrotondati e quindi si sovrappone ai nostri angoli
arrotondati che abbiamo sulla vista circostante. Per risolvere questo problema, possiamo
avvolgere l'immagine in una vista separata e, come ho già detto
in precedenza nel corso, in React Native è davvero normale avere un paio
di viste nidificate perché a questa vista ora possiamo allegare uno stile che possiamo forse dare un identificatore del contenitore di immagini che ora
possiamo aggiungere al nostro foglio di stile e ora fornirò a questa immagine il mio larghezza e altezza qui
e sull'immagine, quindi aggiungerò solo una larghezza e un'altezza del 100% perché
ora è
all'interno di il contenitore, questo
qui si riferisce
al genitore, quindi a questo contenitore, quindi verrà applicata anche
un'altezza del 60% all'immagine ma su quel contenitore dell'immagine,
ora possiamo aggiungere un bordo in alto a sinistra raggio di 10 e un bordo
in alto raggio giusto di
10 in modo da aggirare questi angoli e ora importante, aggiungere l'overflow nascosto qui perché questo assicurerà che qualsiasi bambino
che è la nostra immagine, ovviamente, non possa sovrapporsi a ciò che abbiamo impostato qui.
Quindi ora con questa configurazione, aggiungiamo i nostri angoli arrotondati qui di nuovo all'inizio e
ora questi sono gli elementi dell'immagine che voglio qui e, naturalmente, è anche un elenco scorrevole in
cui vedi anche che queste immagini sono caricate in modo pigro automaticamente che puoi continuare a lavorare con.
Naturalmente, il prossimo obiettivo potrebbe essere che possiamo anche visualizzare la schermata dei dettagli.