Nella schermata dei dettagli del prodotto, abbiamo già iniziato a lavorarci, ma non stiamo realizzando
nulla di utile lì, ora è il
momento di cambiarlo.
Per questo, sostituirò il codice jsx che stiamo attualmente usando lì con una vista di scorrimento perché come
ho già detto in precedenza, pubblicheremo
la nostra immagine lì, la nostra descrizione del prodotto e questa potrebbe
essere una descrizione molto lunga o siamo
semplicemente visualizzandolo su un dispositivo più piccolo o
in modalità orizzontale, quindi vogliamo sicuramente avere alcuni contenuti scorrevoli lì e tra l'altro
non abbiamo bisogno di un elenco piatto qui perché il
contenuto non sarà infinitamente lungo, sappiamo praticamente che non lo farà essere così in anticipo, quindi la
vista di scorrimento è perfettamente a posto e in quella vista di scorrimento, ora puoi aggiungere un componente immagine che emette l'immagine del prodotto in alto
diciamo e sotto che, possiamo quindi forse aggiungere il nostro pulsante per permetterci di aggiungi questo a un carrello e sotto quello, possiamo avere il nostro testo, come visualizzare il prezzo e quindi forse il testo
per la descrizione. Quindi, per l'immagine, dobbiamo impostare
il prop sorgente e questo è un oggetto che ha una proprietà URI e ovviamente abbiamo il nostro
prodotto selezionato qui, quindi il sorgente è appena selezionato Product. imageUrl perché il prodotto selezionato è del
tipo che abbiamo definito nel nostro modello di prodotti. Sul pulsante qui, possiamo aggiungere un titolo di
aggiungi al carrello perché alla fine è quello che dovrebbe fare questo pulsante e onPress non fa
nulla per ora, ma in seguito lo aggiungeremo al carrello. Quindi qui voglio produrre il prezzo, non
abbiamo bisogno
di produrre il titolo perché fa già parte
dell'intestazione, quindi vediamo il titolo lì, ma qui voglio produrre il prezzo in dollari
facendo riferimento al prodotto selezionato. prezzo a fisso 2 che
ho fatto prima e poi laggiù
anche la descrizione, quindi qui abbiamo selezionato Product. descrizione, come questa.
Va
bene, quindi sta bene, ora
è il momento di un po 'di styling ovviamente.
Ad esempio per l'immagine dovremo sicuramente impostare una larghezza e un'altezza perché è un'immagine di
rete, quindi qui aggiungerò lo stile di immagine che devo aggiungere al mio foglio di stile.
Ora per i testi qui, questo testo dovrebbe avere uno stile di prezzo
forse che dobbiamo aggiungere e poi questo qui, questo testo dovrebbe avere uno stile di descrizione forse, sembra un nome appropriato.
Ora nel foglio di stile, dobbiamo aggiungere tutte queste cose, quindi iniziamo per l'immagine.
Lì aggiungerò una larghezza del 100%, questo dovrebbe
davvero prendere l'intera larghezza disponibile e un'altezza di 300 forse e ovviamente
puoi giocarci, puoi anche
usare un valore percentuale per quello o usare l'API delle dimensioni per tipo di calcolare questo in modo dinamico.
Successivamente, voglio avere il mio prezzo, che il testo del prezzo
dovrebbe avere una dimensione del carattere di 20 perché le persone dovrebbero ovviamente essere in grado di vederlo, un colore
di quel grigio, questo colore grigio scuro che ho già usato prima e un allineamento del centro del
testo in modo che
sia sempre centrato, anche un margine sull'asse verticale di 20 forse, quindi attorno ad esso, di 20 e successivamente la descrizione.
La descrizione in realtà può avere una dimensione del carattere di diciamo 14, vediamo se funziona e dentro, usa anche il
centro di allineamento del testo, qualcosa del genere. Se lo salviamo, diamo un'occhiata
a quello, non sembra troppo male. Ora per il pulsante, voglio impostare un colore diverso, quindi aggiungerò il colore qui
e lo imposterò sui colori che dobbiamo importare ovviamente dalla nostra cartella delle costanti, Colori. primario e ora se lo
salviamo, sembra abbastanza carino. Su Android, vedi che il pulsante si trova direttamente sotto l'immagine e
che è un pulsante a larghezza intera.
È lo stesso qui per iOS,
lì non lo
vediamo ma se tocco qui, vedi anche che questo pulsante viene premuto e in realtà non è quello che voglio qui.
Quindi quello che farò è avvolgere questo pulsante in una vista che fornirà uno stile di diciamo azioni, anche se è
solo un'azione qui, potresti avere più pulsanti qui per cose diverse.
Quindi aggiungerò la mia chiave di azione qui al foglio di stile
e lì, possiamo impostare per uno un margine sull'asse verticale da 10 in alto e in basso e allineare i tuoi
oggetti al centro
che, poiché la direzione di flessione predefinita è colonna, centri in orizzontale e ora abbiamo più spazio qui e lo
vediamo ancora meglio su Android, più spazio
e il pulsante ora non si allunga come sarebbe, la sua impostazione di allineamento predefinita più ma
invece prende solo la larghezza di cui ha bisogno e è allineata al centro.
Quindi questa è
la
configurazione con cui andrò, ovviamente puoi ancora modificarlo in diversi modi se
lo desideri, per me
questo non sembra troppo male, vediamo anche come un elemento diverso, forse anche questo,
sì , è tutto molto carino.
Ora, per un testo più lungo qui, però, vedi che non è così bello, ci dovrebbe essere più spazio.
Quindi in realtà sulla descrizione, aggiungerò anche un piccolo margine orizzontale di diciamo 20 in modo da avere una spaziatura attorno a
questo, in modo che se diamo un altro sguardo a questo, vedi ora questo salta automaticamente in una nuova linea
che dovrebbe .
Va
bene, quindi sta
bene, ora abbiamo la schermata dei dettagli del prodotto.
Ora, prima di continuare, voglio portare i miei caratteri e usarli perché non sono soddisfatto dei caratteri
predefiniti.