Per aggiungere l'elemento azione all'intestazione, farò qualcosa che ho fatto anche nella sezione di navigazione, nella cartella
componenti, voglio aggiungere il
mio pulsante di intestazione e ora
per questo, aggiungerò una nuova sottocartella in lì che chiamerò UI e la mia idea qui è semplice.
Ho la cartella del negozio che contiene tutti i componenti che uso nel mio
negozio, che fornisce alcune informazioni relative al negozio. Nella cartella dell'interfaccia utente, voglio avere alcuni
blocchi predefiniti dell'interfaccia utente che ovviamente utilizzo anche in questa applicazione del negozio ma
che non sono realmente focalizzati sulla produzione di dati relativi al negozio o al prodotto ma che
sono semplicemente lì per fornire uno stile o un layout predefinito ed è in questa cartella dell'interfaccia utente in cui aggiungerò il mio pulsante
di intestazione andando lì e importando React da React e quindi importando il pulsante di intestazione dai pulsanti di intestazione di navigazione
di React, questo pacchetto che ho installato all'inizio del modulo, se non l'hai ancora fatto , assicurati di installare questo
pacchetto npm e quindi importare anche Ionicons da @ expo / vector-icons.
Ora per essere super sicuri di averlo installato, esegui npm install --save @ expo / vector-icons, in modo che questo
pacchetto sia disponibile nel tuo progetto.
Queste sono le importazioni di cui ho
bisogno qui, ora voglio anche importare i miei colori dalla cartella delle costanti e lì, i colori. file js e ora qui, aggiungerò il mio componente pulsante
di intestazione personalizzato che è un normale componente React alla fine che riceve oggetti di scena e deve restituire un po
'di jsx e ovviamente esporterò il mio pulsante di intestazione personalizzato qui alla fine e ora il jsx che questo
ha
restituito qui è il pulsante di intestazione che sto importando dai pulsanti di intestazione
di navigazione di React ma devo configurarlo in un certo modo, utilizzare il pulsante di intestazione qui dai pulsanti
di intestazione di navigazione di React. Per uno, questo dovrebbe ricevere tutti gli oggetti
di scena che otteniamo qui, quindi li inoltriamo ma, in più, imposterò il mio componente icone
qui su Ionicon, in modo da usare sempre Ionicon per
renderlo e, naturalmente, potresti usare uno di anche i diversi set di icone vettoriali forniti da @ expo / vector-icons.
Imposterò la dimensione dell'icona su 23 che ho trovato per funzionare davvero bene, ma ovviamente puoi anche sperimentare
valori diversi qui, anche se forse stai
usando un set di icone diverso, prova una dimensione dell'icona diversa. E per il colore, bene, dipende dal fatto che
su Android, abbiamo
uno sfondo rosso qui, per iOS che non abbiamo, quindi dobbiamo impostare un
colore diverso in base alla piattaforma su cui siamo
in esecuzione, quindi in realtà importare la piattaforma da React Native qui e quindi possiamo controllare la piattaforma qui e se la versione
del sistema operativo è
Android, allora so di avere questo solido campo
di fondo, quindi l'icona dovrebbe essere bianca. D'altra parte su iOS, lo sfondo non è pieno,
è trasparente e quindi su iOS imposterò il colore della mia icona su Colori. primario.
Ora possiamo usarlo per aggiungere un'icona qui nella schermata di panoramica dei prodotti, lì nelle mie opzioni di navigazione qui,
voglio
aggiungere la mia sezione di intestazione a destra, quindi un'icona a destra della mia intestazione e per questo qui, dobbiamo importare un
paio di cose, dobbiamo importare i pulsanti e gli elementi dell'intestazione dal pacchetto di pulsanti dell'intestazione di
navigazione React che abbiamo installato.
Ovviamente ho anche bisogno di importare il mio pulsante di intestazione dai pulsanti di intestazione dell'interfaccia utente dei componenti, quindi questo componente
in cui abbiamo appena lavorato e ora laggiù, l'intestazione a destra sono i pulsanti di intestazione come wrapper per possibilmente avere più elementi lì dentro
ma ne aggiungerò solo uno elemento, un elemento a chiusura automatica, sui pulsanti di intestazione prima di
continuare con l'oggetto, dobbiamo impostare il componente del pulsante di intestazione uguale al pulsante di intestazione,
quindi al nostro pulsante di intestazione qui. E l'oggetto ora può essere configurato, dovrebbe ricevere un titolo che
può
essere carrello, dovrebbe ricevere un nome icona e in realtà voglio usare un'icona diversa in
base alla piattaforma su cui stiamo girando, quindi quindi da React Native, I importerò la piattaforma, che è facoltativa, potresti
usare la stessa icona per entrambe le piattaforme ma penso che sia bello avere icone diverse.
E poi qui, controllerò il sistema operativo della piattaforma e se è Android, allora voglio usare l'icona del carrello md che è l'icona del carrello Ionicon per
la progettazione dei materiali e altrimenti userò l'icona del carrello iOS e di nuovo puoi trovare tutti disponibili icone in
questo elenco di icone che ti ho mostrato
prima nel corso, l'elenco delle icone di expo / icone vettoriali e ultimo ma non meno importante quando l'oggetto viene
premuto, probabilmente vorremmo fare qualcosa e per ora, non faccio altro che noi lo cambierò presto.
Se ora salviamo questo,
dovremmo
vedere questa icona qui, eccola
qui, ecco il nostro carrello, anche su Android e ora dobbiamo solo assicurarci che quando tocchiamo
questo, siamo portati alla schermata del nostro carrello. Per quello, ovviamente, dobbiamo aggiungere un po 'di logica o un po' di output allo schermo del carrello.
Quindi all'interno dello schermo del carrello, ovviamente abbiamo
un normale componente React, quindi
importiamo React da React, importiamo anche qualcosa da React Native e che qualcosa è un componente di visualizzazione per avvolgere il
nostro schermo forse, probabilmente avremo un po 'di testo anche.
Avremo un paio di articoli del carrello elencati qui che possiamo fare con
un elenco piatto per avere l'ottimizzazione integrata, probabilmente vorremmo modellare alcune cose con un foglio
di stile e importerò anche il componente pulsante incorporato. Ora il mio carrello qui come sempre è un componente React e imposterò questo oggetto
di stili qui con il foglio di stile. creare in modo che possiamo modellare anche questo
componente e, alla fine, esportiamo la schermata del carrello qui come impostazione predefinita.
Ora puoi ovviamente costruire questo carrello nel modo che preferisci, lo costruirò in modo tale
da avere una vista e in quella vista, voglio avere due sezioni principali. La sezione più in alto è come il riepilogo
in cui vedo l'importo totale e in cui ho il pulsante ordine ora.
Questo sarà in una riga, quindi avrò una vista nidificata qui dove posso posizionare gli elementi uno accanto
all'altro dove ho come un testo in cui dico il
totale e quindi qui il simbolo del dollaro e forse il mio prezzo totale. Possiamo anche nidificare questo, puoi avere componenti di
testo nidificati se ricordi senza problemi per dare ad esempio un colore separato, quindi per
ora ho hardcode 19. 99, ma in seguito questo verrà derivato in modo dinamico.
Quindi questa
è una cosa e, inoltre, nella stessa riga qui, voglio avere un pulsante con un titolo di
ordine ora dove posso premerlo per effettuare un ordine, cancellare il mio carrello e aggiungerlo
ai miei ordini che non
abbiamo ancora gestito e l'output nella schermata dell'ordine alla fine. Ora sotto questa sezione di riepilogo, voglio avere un elenco semplice con i miei articoli del carrello separati, in
modo che possiamo davvero vedere cosa
c'è nel carrello, quali prodotti sono lì, quanto di ogni prodotto è lì,
quindi questa è un'altra cosa che verrà emesso lì. Per il momento qui, aggiungerò solo una
vista con un testo di articoli del carrello come segnaposto ma, di nuovo, questa sarà una
lista piatta in futuro, ma iniziamo con il totale qui. Per ottenere quel totale, possiamo attingere a
Redux perché lì stiamo gestendo il nostro carrello, quindi possiamo usare il selettore di React Redux mentre hai imparato a
ottenere i dati dal nostro negozio e qui, ho il totale del mio carrello forse che
ottengo con l'aiuto del selettore d'uso dal mio stato. carrello, fetta. carrello qui perché
nell'app. file js in riduttori combinati, ho assegnato una chiave del carrello qui al mio riduttore del carrello.
Quindi qui ho. carrello e poi lì, all'interno del
riduttore del carrello, gestisco il mio importo totale e il campo importo totale, quindi questo è ciò di cui abbiamo bisogno per accedere qui, importo totale.
Questo dà il totale al carrello e ora possiamo usarlo laggiù e con quello per assicurarci
che anche questo appaia bene, è tempo di un po 'di stile.
Quindi nella vista più in alto qui, aggiungerò uno stile di schermo forse perché questo avvolge
l'intero schermo
alla fine, quindi qui in quella vista, aggiungerò uno stile di riepilogo perché contiene tutti
gli elementi di riepilogo, quindi qui su questo
testo, aggiungerò uno stile di testo di riepilogo e quindi qui, aggiungerò uno stile di importo, in modo da poter dare uno stile diverso a questo importo.
Quindi, per gli
stili che voglio impostare, passiamo al foglio di stile e aggiungiamo schermata, riepilogo, testo di riepilogo e quindi, come l'ho chiamato?
quantità e, naturalmente, dipende sempre da te come ora vuoi modellare questo.
Ora inizierò con lo schermo, alla fine voglio prendere l'intera dimensione dello schermo se ne avremo bisogno con
l'elenco piatto in seguito, ma inizierò semplice e diremo solo che voglio avere un margine in tutto indicazioni in realtà qui di 20,
quindi intorno a tutto, in modo che ci sia spazio intorno a tutto. Quindi qui, riepilogo che è la nostra scatola con tutti gli articoli
lì dentro con l'ordine ora e il nostro testo dovrebbe usare una direzione flessibile della
riga per posizionare gli articoli in una riga.
Sono andato ad allineare gli oggetti al centro per assicurarmi che siano centrati verticalmente e sul loro asse
principale, voglio usare giustificare lo spazio tra i contenuti in modo che gli oggetti abbiano lo spazio libero tra loro e gli
elementi siano questo testo qui e questo pulsante. Oltre a ciò, possiamo aggiungere un po 'di margine
qui, forse anche
di 20, il che è molto importante anche per avere un po' di spazio tra il sommario
e la nostra lista piatta, quindi in realtà userò il margine inferiore qui per avere solo un margine sul in basso
e voglio aggiungere un'imbottitura di 10 qui perché il riepilogo dovrebbe essere un po
'in una scatola sopraelevata e per questa scatola qui, andrò al mio componente dell'articolo del prodotto e copierò la mia ombra impostata qui e il bordo raggio forse
ho qui e il colore di sfondo, quindi ho lo stesso aspetto qui nel carrello e questo dipende
da te se lo vuoi o no, ma lo copierò lì.
Per il testo di riepilogo, ora voglio usare una famiglia di caratteri di open sans in grassetto per evidenziare davvero questo totale e una dimensione
del carattere di 18 e per la quantità di testo lì dentro, imposterò
il colore sui colori. colore di accento.
Ora, ovviamente, per quello importante, è necessario importare i colori dalla cartella delle costanti e quindi uso
l'accento e non primario per distinguerlo davvero. Per vedere se questo sembra nel modo in cui vogliamo che
appaia, dobbiamo assicurarci che toccando questo pulsante di intestazione nella nostra schermata di panoramica del prodotto ci
porti effettivamente alla schermata del carrello e, per questo, sono necessari due elementi.
Per prima cosa, dobbiamo navigare qui, ma prima di poterlo fare, dobbiamo
registrare la schermata del carrello nel nostro navigatore. Quindi lo farò per primo, importerò il mio carrello qui dalla cartella
schermi non sorprende, dalla cartella del negozio e lì dalla schermata del carrello e ora questa è la terza schermata che
aggiungo qui a questo navigatore dello stack, punti del carrello nella schermata del carrello . Con questa configurazione aggiunta qui, possiamo tornare alla schermata di panoramica del
prodotto e lì, ora abbiamo bisogno di quel modulo funzionale per le opzioni di navigazione perché i dati di navigazione
ci permettono quindi di toccare il puntello di navigazione e chiamare la navigazione,
quindi dobbiamo avvolgere questo in un altro oggetto che
restituiamo e quindi qui possiamo chiamare navData. navigazione. navigo e lì, vado al carrello e questo
ovviamente è l'identificatore che ho appena scelto nel navigatore del
negozio qui, questo. Detto questo, vediamo che, se
faccio clic qui, eccoci qui, questo è
il
mio totale, in realtà
penso che il colore dell'accento non sia eccezionale lì, quindi in
realtà tornerò allo schermo del carrello e lo modellerò per usare il anche il colore primario, ma la cosa
principale è che possiamo andare lì e se ora provo ad aggiungere articoli al carrello, ho aggiunto la camicia due
volte e il tappeto una volta, quell'importo totale mi sembra buono. Proviamo anche questo su Android ovviamente per assicurarci che
funzioni anche lì e generalmente funzioni, aggiungo un'altra maglietta rossa e quindi qui vediamo anche un problema
con il modo in cui viene visualizzato. Per risolvere questo problema, sullo schermo del carrello, assicurati che
sul prezzo, produciamo sempre solo due cifre decimali sull'importo con su fisso. A proposito, nel caso ti stia chiedendo da
dove venisse, questo numero lungo,
questo non è un bug o niente di React Native, questo è normale
comportamento Javascript quando lavori con numeri in virgola mobile e ovviamente per risolvere non dovrebbe essere chiamato sullo
stile qui ma sull'importo totale del carrello. Quindi si trattava di un comportamento normale,
non di un bug, è così che Javascript poteva dire internamente di memorizzare numeri in virgola mobile che
potevi dire, ma ora ci assicuriamo che questo venga emesso correttamente con due cifre decimali. La cosa che manca è il pulsante e qui ora voglio davvero usare il colore, l'accento di
colori per avere il mio pulsante di accento colorato. Quindi, se ora vado al mio carrello qui su iOS, ecco come
appare il pulsante lì, ecco come appare su Android.
Possiamo sempre premere questo, ovviamente voglio disabilitarlo anche se se non c'è nulla nel carrello e per
questo, ora abbiamo bisogno di ottenere anche i nostri articoli del carrello. Quindi gli articoli del carrello possono anche essere recuperati con il selettore
d'uso, anche dalla sezione carrello ma lì, sono gli oggetti di scena dal riduttore del carrello a cui siamo interessati.
Quindi, se do un'occhiata al riduttore del carrello, ecco che abbiamo la proprietà degli articoli.
Questo è un oggetto che sto
recuperando ora, quindi carrello articoli è un oggetto, non un array, in realtà un array sarebbe meglio per me qui e quindi userò la forma
lunga per ottenere questo e restituirò un array qui e non un oggetto. Quindi possiamo ottenere qui i nostri articoli del carrello
trasformati, ad esempio creando un nuovo array qui all'interno di questa funzione di selezione e quindi possiamo aggiungere un ciclo for / in per passare attraverso
tutte le chiavi nello stato. carrello. articoli, quindi per scorrere
in sequenza tutte le coppie chiave-valore in
questo oggetto articoli carrello che abbiamo lì dentro e
voglio aggiungerli come articolo agli articoli carrello trasformati. Quindi lì spingerò un oggetto Javascript che ha un ID prodotto, diciamo
che è solo la mia chiave perché nell'oggetto ID carrello articoli, l'ID prodotto viene memorizzato come chiave se
ricordi, quindi
ora aggiungo questo alla proprietà ID prodotto in questo oggetto aggiungo alla matrice degli articoli del carrello trasformati e oltre
a ciò, avrò il titolo del mio prodotto che è ovviamente stato. carrello. elementi per la chiave
fornita. ProductTitle.
Se dai un'occhiata al tuo modello di articolo del carrello, vedrai che lì, titolo del prodotto e prezzo del prodotto sono i
nomi delle proprietà che detengono il titolo del prodotto e il
prezzo del prodotto, quindi è così
che accediamo ad entrambi, quindi farò lo stesso qui per il prezzo del prodotto e, successivamente, ho anche bisogno
della quantità che è dichiarata. carrello. elementi per la chiave fornita. quantità e ovviamente anche la somma che è stato. carrello. elementi. chiave. somma, di nuovo fondamentalmente proprio quello che avevamo qui nel carrello.
Quindi quello che sto facendo è per
dire che sto creando un nuovo articolo carrello, non con il mio modello, perché
è un articolo carrello con una proprietà ID prodotto aggiuntiva in modo da avere questo qui e ora è questo array di articoli
carrello trasformato che restituisco dopo questo per il ciclo, in modo che questo selettore alla fine restituisca un array e
non un oggetto,
quindi gli articoli del carrello sono ora un array che ci rende più facile usarlo nell'elenco piatto e ci consente anche
di controllare qui sul pulsante ordina ora se vogliamo disabilitarlo semplicemente controllando la lunghezza di questo array che
ora abbiamo nel carrello articoli.
Quindi qui sul pulsante, possiamo impostare
l'elica di disabilitazione che supporta per fortuna, questo è un componente integrato che ha semplicemente un elica disabilitata e lì posso controllare
se la lunghezza degli articoli del carrello è uguale a zero, se lo è, allora io so che è vuoto e quindi in effetti voglio disabilitare il pulsante. Quindi disabilitato riceve vero o falso, per impostazione predefinita è falso ma lo imposterò su vero se la lunghezza
degli articoli del carrello è 0. E ora vedi se vado allo
schermo del carrello, questo è disabilitato, se aggiungo
un prodotto e ci vado, è abilitato e ovviamente potresti anche usare un colore diverso per il pulsante ordina ora se lo desideri.
Ora, con ciò, siamo un passo avanti verso
i carrelli finiti e, naturalmente, l'obiettivo successivo è quello di produrre gli articoli del carrello.