1
00:00:02,180 --> 00:00:07,440
Nella schermata dei dettagli del prodotto, abbiamo già iniziato a lavorarci, ma non stiamo realizzando

2
00:00:07,850 --> 00:00:10,240
nulla di utile lì, ora è il

3
00:00:10,250 --> 00:00:11,600
momento di cambiarlo.

4
00:00:11,690 --> 00:00:17,570
Per questo, sostituirò il codice jsx che stiamo attualmente usando lì con una vista di scorrimento perché come

5
00:00:17,570 --> 00:00:19,790
ho già detto in precedenza, pubblicheremo

6
00:00:19,790 --> 00:00:23,510
la nostra immagine lì, la nostra descrizione del prodotto e questa potrebbe

7
00:00:23,510 --> 00:00:25,790
essere una descrizione molto lunga o siamo

8
00:00:25,850 --> 00:00:28,410
semplicemente visualizzandolo su un dispositivo più piccolo o

9
00:00:28,640 --> 00:00:33,020
in modalità orizzontale, quindi vogliamo sicuramente avere alcuni contenuti scorrevoli lì e tra l'altro

10
00:00:33,100 --> 00:00:36,420
non abbiamo bisogno di un elenco piatto qui perché il

11
00:00:36,440 --> 00:00:42,020
contenuto non sarà infinitamente lungo, sappiamo praticamente che non lo farà essere così in anticipo, quindi la

12
00:00:42,020 --> 00:00:50,210
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

13
00:00:50,220 --> 00:01:01,560
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

14
00:01:01,560 --> 00:01:04,260
per la descrizione. Quindi, per l'immagine, dobbiamo impostare

15
00:01:04,270 --> 00:01:08,980
il prop sorgente e questo è un oggetto che ha una proprietà URI e ovviamente abbiamo il nostro

16
00:01:09,330 --> 00:01:14,530
prodotto selezionato qui, quindi il sorgente è appena selezionato Product. imageUrl perché il prodotto selezionato è del

17
00:01:14,620 --> 00:01:20,680
tipo che abbiamo definito nel nostro modello di prodotti. Sul pulsante qui, possiamo aggiungere un titolo di

18
00:01:20,680 --> 00:01:26,530
aggiungi al carrello perché alla fine è quello che dovrebbe fare questo pulsante e onPress non fa

19
00:01:26,620 --> 00:01:32,970
nulla per ora, ma in seguito lo aggiungeremo al carrello. Quindi qui voglio produrre il prezzo, non

20
00:01:33,010 --> 00:01:34,390
abbiamo bisogno

21
00:01:34,390 --> 00:01:37,600
di produrre il titolo perché fa già parte

22
00:01:37,600 --> 00:01:43,630
dell'intestazione, quindi vediamo il titolo lì, ma qui voglio produrre il prezzo in dollari

23
00:01:43,630 --> 00:01:47,810
facendo riferimento al prodotto selezionato. prezzo a fisso 2 che

24
00:01:48,100 --> 00:01:50,410
ho fatto prima e poi laggiù

25
00:01:50,410 --> 00:01:56,170
anche la descrizione, quindi qui abbiamo selezionato Product. descrizione, come questa.

26
00:01:56,200 --> 00:01:56,560
Va

27
00:01:56,590 --> 00:01:57,670
bene, quindi sta bene, ora

28
00:01:57,670 --> 00:01:59,380
è il momento di un po 'di styling ovviamente.

29
00:01:59,380 --> 00:02:04,270
Ad esempio per l'immagine dovremo sicuramente impostare una larghezza e un'altezza perché è un'immagine di

30
00:02:04,270 --> 00:02:09,350
rete, quindi qui aggiungerò lo stile di immagine che devo aggiungere al mio foglio di stile.

31
00:02:09,460 --> 00:02:15,040
Ora per i testi qui, questo testo dovrebbe avere uno stile di prezzo

32
00:02:15,580 --> 00:02:24,490
forse che dobbiamo aggiungere e poi questo qui, questo testo dovrebbe avere uno stile di descrizione forse, sembra un nome appropriato.

33
00:02:24,490 --> 00:02:31,690
Ora nel foglio di stile, dobbiamo aggiungere tutte queste cose, quindi iniziamo per l'immagine.

34
00:02:31,980 --> 00:02:34,580
Lì aggiungerò una larghezza del 100%, questo dovrebbe

35
00:02:34,580 --> 00:02:38,730
davvero prendere l'intera larghezza disponibile e un'altezza di 300 forse e ovviamente

36
00:02:38,740 --> 00:02:40,570
puoi giocarci, puoi anche

37
00:02:40,570 --> 00:02:46,810
usare un valore percentuale per quello o usare l'API delle dimensioni per tipo di calcolare questo in modo dinamico.

38
00:02:48,000 --> 00:02:52,970
Successivamente, voglio avere il mio prezzo, che il testo del prezzo

39
00:02:53,080 --> 00:03:01,810
dovrebbe avere una dimensione del carattere di 20 perché le persone dovrebbero ovviamente essere in grado di vederlo, un colore

40
00:03:01,870 --> 00:03:09,670
di quel grigio, questo colore grigio scuro che ho già usato prima e un allineamento del centro del

41
00:03:09,670 --> 00:03:11,780
testo in modo che

42
00:03:11,850 --> 00:03:20,640
sia sempre centrato, anche un margine sull'asse verticale di 20 forse, quindi attorno ad esso, di 20 e successivamente la descrizione.

43
00:03:21,240 --> 00:03:30,660
La descrizione in realtà può avere una dimensione del carattere di diciamo 14, vediamo se funziona e dentro, usa anche il

44
00:03:30,680 --> 00:03:38,810
centro di allineamento del testo, qualcosa del genere. Se lo salviamo, diamo un'occhiata

45
00:03:38,810 --> 00:03:47,420
a quello, non sembra troppo male. Ora per il pulsante, voglio impostare un colore diverso, quindi aggiungerò il colore qui

46
00:03:47,450 --> 00:03:56,170
e lo imposterò sui colori che dobbiamo importare ovviamente dalla nostra cartella delle costanti, Colori. primario e ora se lo

47
00:03:56,200 --> 00:04:03,500
salviamo, sembra abbastanza carino. Su Android, vedi che il pulsante si trova direttamente sotto l'immagine e

48
00:04:03,680 --> 00:04:06,300
che è un pulsante a larghezza intera.

49
00:04:06,320 --> 00:04:07,900
È lo stesso qui per iOS,

50
00:04:07,910 --> 00:04:08,830
lì non lo

51
00:04:08,840 --> 00:04:13,940
vediamo ma se tocco qui, vedi anche che questo pulsante viene premuto e in realtà non è quello che voglio qui.

52
00:04:14,150 --> 00:04:23,310
Quindi quello che farò è avvolgere questo pulsante in una vista che fornirà uno stile di diciamo azioni, anche se è

53
00:04:23,310 --> 00:04:28,160
solo un'azione qui, potresti avere più pulsanti qui per cose diverse.

54
00:04:28,350 --> 00:04:32,890
Quindi aggiungerò la mia chiave di azione qui al foglio di stile

55
00:04:33,030 --> 00:04:40,530
e lì, possiamo impostare per uno un margine sull'asse verticale da 10 in alto e in basso e allineare i tuoi

56
00:04:41,930 --> 00:04:43,260
oggetti al centro

57
00:04:43,430 --> 00:04:50,740
che, poiché la direzione di flessione predefinita è colonna, centri in orizzontale e ora abbiamo più spazio qui e lo

58
00:04:50,740 --> 00:04:53,750
vediamo ancora meglio su Android, più spazio

59
00:04:53,780 --> 00:05:00,100
e il pulsante ora non si allunga come sarebbe, la sua impostazione di allineamento predefinita più ma

60
00:05:00,100 --> 00:05:05,230
invece prende solo la larghezza di cui ha bisogno e è allineata al centro.

61
00:05:05,240 --> 00:05:06,310
Quindi questa è

62
00:05:06,440 --> 00:05:07,050
la

63
00:05:07,070 --> 00:05:11,480
configurazione con cui andrò, ovviamente puoi ancora modificarlo in diversi modi se

64
00:05:11,480 --> 00:05:13,150
lo desideri, per me

65
00:05:13,160 --> 00:05:18,360
questo non sembra troppo male, vediamo anche come un elemento diverso, forse anche questo,

66
00:05:18,440 --> 00:05:20,820
sì , è tutto molto carino.

67
00:05:20,870 --> 00:05:25,790
Ora, per un testo più lungo qui, però, vedi che non è così bello, ci dovrebbe essere più spazio.

68
00:05:26,240 --> 00:05:34,700
Quindi in realtà sulla descrizione, aggiungerò anche un piccolo margine orizzontale di diciamo 20 in modo da avere una spaziatura attorno a

69
00:05:34,700 --> 00:05:42,600
questo, in modo che se diamo un altro sguardo a questo, vedi ora questo salta automaticamente in una nuova linea

70
00:05:42,600 --> 00:05:43,890
che dovrebbe .

71
00:05:44,970 --> 00:05:45,290
Va

72
00:05:45,360 --> 00:05:46,290
bene, quindi sta

73
00:05:46,290 --> 00:05:48,380
bene, ora abbiamo la schermata dei dettagli del prodotto.

74
00:05:48,480 --> 00:05:53,970
Ora, prima di continuare, voglio portare i miei caratteri e usarli perché non sono soddisfatto dei caratteri

75
00:05:53,970 --> 00:05:54,420
predefiniti.