1
00:00:02,200 --> 00:00:08,590
Quindi assicuriamoci che i nostri articoli di prodotto nella schermata di panoramica del prodotto abbiano un aspetto un po 'più

2
00:00:11,860 --> 00:00:16,520
bello di quello che stanno attualmente guardando. Proprio ora ovviamente, ogni articolo del prodotto è

3
00:00:16,540 --> 00:00:22,090
appena reso come testo, come componente di testo e non è quello che voglio qui, rimuoverò invece l'importazione e creerò un

4
00:00:22,090 --> 00:00:24,970
nuovo componente che dovrebbe essere responsabile del mio articolo di prodotto.

5
00:00:25,060 --> 00:00:31,540
Ora una nota importante relativa a dove creiamo quel componente, possiamo crearlo qui

6
00:00:31,560 --> 00:00:35,510
nella Panoramica prodotti. Anche js file, possiamo ovviamente avere

7
00:00:35,530 --> 00:00:41,890
più di un componente per file, quindi qui potrei aggiungere il mio componente dell'articolo del prodotto o comunque tu voglia chiamarlo,

8
00:00:41,890 --> 00:00:47,250
come questo, quindi possiamo usare questo componente in questo file che è ovviamente cosa ho intenzione di fare.

9
00:00:47,290 --> 00:00:52,870
Questo è un modello che puoi usare se hai un componente che è fortemente legato ad un altro componente e

10
00:00:53,080 --> 00:00:57,070
lo stai solo dividendo in modo che ogni componente sia un po 'più leggibile.

11
00:00:57,370 --> 00:01:03,160
Una volta che questi componenti separati diventano molto grandi, dovresti comunque considerare di dividerli in file separati in modo

12
00:01:03,190 --> 00:01:08,350
che i tuoi file rimangano piccoli e se le persone vogliono dare un'occhiata a uno dei

13
00:01:08,350 --> 00:01:12,700
due componenti, non devono scorrere sopra l'altro componente potrebbero non essere interessati a.

14
00:01:12,820 --> 00:01:18,730
Quindi questa è una cosa da tenere a mente. Naturalmente, se prevedi anche di utilizzare un componente in

15
00:01:19,150 --> 00:01:25,990
un altro componente, dovresti sempre memorizzarlo in un file separato, non solo in modo da poterlo esportare come predefinito perché potresti anche

16
00:01:25,990 --> 00:01:29,950
esportarlo se è archiviato insieme a un altro componente, non è questo il

17
00:01:30,520 --> 00:01:36,550
motivo principale, ma soprattutto per chiarire che si tratta di un componente autonomo che potrebbe e verrà utilizzato in

18
00:01:36,550 --> 00:01:38,310
diverse parti della tua app.

19
00:01:38,350 --> 00:01:45,550
Ora l'articolo del prodotto non solo non sarà super piccolo, il che da solo sarebbe un motivo per inserirlo in un

20
00:01:45,550 --> 00:01:51,460
file separato, ma lo userò anche in un componente diverso in un secondo momento o in

21
00:01:51,460 --> 00:01:57,970
luoghi diversi dell'app, non è solo pertinente alla schermata della panoramica dei prodotti e, quindi, lo aggiungerò nella cartella

22
00:01:57,970 --> 00:02:04,030
dei componenti e nella cartella dei componenti, per organizzare un po 'i miei componenti, aggiungerò una sottocartella

23
00:02:04,120 --> 00:02:10,300
del negozio in cui voglio posizionare tutti i componenti che sono direttamente correlato alla funzionalità del negozio o

24
00:02:10,300 --> 00:02:12,950
alle funzionalità in generale della mia app.

25
00:02:13,090 --> 00:02:19,390
Quindi, nella sottocartella del negozio, aggiungerò questo ProductItem. file js e vedrai quali altre cartelle

26
00:02:19,390 --> 00:02:21,540
aggiungerò qui in seguito.

27
00:02:21,550 --> 00:02:27,640
Ancora una volta, tutti questi schemi e pratiche che ti sto mostrando qui sono solo possibili modi per farlo, in

28
00:02:28,360 --> 00:02:34,480
generale nei miei corsi e anche in questo corso, mostro tutte le migliori pratiche che puoi usare ma spesso in programmazione,

29
00:02:34,480 --> 00:02:37,270
non c'è solo un modo giusto o sbagliato,

30
00:02:37,390 --> 00:02:43,180
quindi le pratiche e i modelli che sto mostrando qui sono pratiche e modelli che vedrai anche in altri

31
00:02:43,180 --> 00:02:48,670
progetti ma potresti anche vedere altre strutture di cartelle, alla fine puoi sempre lavorare con la struttura che

32
00:02:48,670 --> 00:02:55,480
funziona per te, non c'è una scelta giusta o sbagliata qui, voglio solo spiegare il mio ragionamento per l'utilizzo di questa struttura che,

33
00:02:55,480 --> 00:03:00,910
si spera, ti aiuta a capire perché lo uso e perché questo potrebbe valere la pena di pensarci.

34
00:03:01,900 --> 00:03:10,960
Quindi qui, il file dell'articolo del prodotto, ProductItem. Il file js conterrà ovviamente il componente dell'articolo del prodotto che è un normale

35
00:03:10,960 --> 00:03:16,110
componente funzionale che riceve oggetti di scena e alla fine restituirà il codice jsx e quindi

36
00:03:16,120 --> 00:03:22,750
poiché contiene il codice jsx, dobbiamo importare React da React e qui, anche, importa cose da React Native perché qui ora

37
00:03:23,170 --> 00:03:30,070
lavorerò con queste primitive React Native per costruire davvero il mio componente perché da lì, avrò bisogno della vista, avrò bisogno del

38
00:03:30,520 --> 00:03:34,930
testo, voglio anche usare l'immagine perché noi ' Visualizzerò qui l'immagine del prodotto e

39
00:03:34,930 --> 00:03:42,310
anche il foglio di stile perché sicuramente lo faremo anche noi. Quindi puoi anche aggiungere una costante di stili qui

40
00:03:42,310 --> 00:03:48,190
che creiamo con il foglio di stile. creare a cui passiamo un oggetto Javascript

41
00:03:48,190 --> 00:03:56,170
e, alla fine, esportiamo qui l'articolo del prodotto come predefinito, ovviamente. Ora qui, in questo componente intendo, possiamo iniziare a creare

42
00:03:56,170 --> 00:04:02,350
il codice jsx che compone l'articolo del prodotto e questo sarà un componente di presentazione, il

43
00:04:02,350 --> 00:04:08,500
che significa che non ci sarà alcuna logica qui, non gestiremo alcuno stato interno, questo sarà

44
00:04:08,530 --> 00:04:14,630
solo un componente che possiamo usare in altri componenti per ottenere lo stile e il layout

45
00:04:14,630 --> 00:04:21,250
giusti fuori dalla scatola, quindi questo componente sarà responsabile dell'uso di determinati componenti React Native, del loro layout

46
00:04:21,400 --> 00:04:28,090
e del loro stile in un certo modo. Quindi qui, alla fine, voglio restituire una vista

47
00:04:28,090 --> 00:04:34,150
che avvolge tutto, che organizza tutto, che possiamo anche modellare per ottenere questo carrello

48
00:04:34,150 --> 00:04:42,100
con forse un'ombra discendente, forse angoli arrotondati, qualunque cosa tu voglia e lì dentro, ora hanno parti diverse, ad

49
00:04:42,100 --> 00:04:50,460
esempio avremo sicuramente l'immagine lì dentro, l'immagine del prodotto, voglio anche avere il titolo e il prezzo, quindi avremo

50
00:04:50,460 --> 00:04:53,480
bisogno di un testo qui, quindi per

51
00:04:53,700 --> 00:05:04,630
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

52
00:05:05,200 --> 00:05:07,650
pulsanti, quindi qui possiamo usare

53
00:05:07,650 --> 00:05:14,680
il componente pulsante incorporato per il momento, dove possiamo quindi aggiungere un prodotto al carrello o

54
00:05:14,680 --> 00:05:22,120
anche visualizzare i dettagli , quindi dove abbiamo sostanzialmente queste due opzioni e ovviamente dovremo aggiungere i

55
00:05:22,120 --> 00:05:26,760
gestori di Press qui. Quindi questo è lo scheletro di base,

56
00:05:26,770 --> 00:05:30,880
probabilmente non quello finale, dovremo vedere come possiamo modellare tutto qui ma questo è

57
00:05:30,930 --> 00:05:32,390
il layout che voglio.

58
00:05:32,500 --> 00:05:37,460
In questo modo avvolgo i miei pulsanti in vista perché voglio averli fianco a fianco nella fila e

59
00:05:37,510 --> 00:05:43,030
avendo una vista intorno a loro, possiamo modellare quella vista in modo tale che usi la riga di direzione flessibile

60
00:05:43,040 --> 00:05:43,960
e così via.

61
00:05:43,990 --> 00:05:45,040
Quindi

62
00:05:45,040 --> 00:05:47,320
questa è una configurazione con

63
00:05:47,440 --> 00:05:49,850
cui possiamo lavorare qui, ora aggiungiamo

64
00:05:49,960 --> 00:05:53,980
un po 'di stile e per questo voglio usare

65
00:05:53,980 --> 00:05:59,980
o iniziare qui nella vista circostante in cui ho impostato il prodotto stili come

66
00:05:59,980 --> 00:06:03,900
questo, quindi qui nel foglio di stile, aggiungo un

67
00:06:04,020 --> 00:06:07,200
prodotto del genere, aggiungo il mio codice

68
00:06:07,210 --> 00:06:17,650
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

69
00:06:17,650 --> 00:06:27,580
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

70
00:06:27,610 --> 00:06:32,080
offset dell'altezza di due e un raggio dell'ombra di otto forse e

71
00:06:32,080 --> 00:06:36,490
come sempre giocare con questi valori per trovare la tua configurazione.

72
00:06:36,490 --> 00:06:39,320
Ora potresti ricordare che l'ombra funziona solo su

73
00:06:39,340 --> 00:06:45,670
iOS, quindi per Android aggiungerò qui la proprietà elevazione e la imposterò su cinque forse, ancora una volta puoi

74
00:06:45,670 --> 00:06:48,070
sperimentare con valori diversi anche lì

75
00:06:48,160 --> 00:06:52,500
e voglio avere un raggio di confine di 10 perché Voglio angoli arrotondati

76
00:06:52,510 --> 00:06:54,250
e di nuovo, è

77
00:06:54,250 --> 00:07:00,400
qualcosa che voglio qui, qualcosa che non devi fare. Aggiungerò anche un colore di sfondo bianco per assicurarmi che il

78
00:07:00,430 --> 00:07:05,290
nostro carrello qui, il nostro prodotto abbia sempre questo colore di sfondo anche se la nostra app

79
00:07:05,290 --> 00:07:14,190
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

80
00:07:14,190 --> 00:07:16,920
prodotto dovrebbe avere un'altezza di 300 pixel

81
00:07:16,920 --> 00:07:21,750
e ovviamente questo è un valore che puoi anche modificare in base alle

82
00:07:21,750 --> 00:07:22,670
tue esigenze.

83
00:07:22,740 --> 00:07:28,050
Ovviamente potresti anche renderlo dinamico con l'API dimensioni come hai appreso nel modulo reattivo

84
00:07:28,050 --> 00:07:34,830
e aggiungerò un margine di 20 in tutte le direzioni attorno a ciascun articolo del prodotto, in modo

85
00:07:34,860 --> 00:07:42,070
da avere una spaziatura in tutte le direzioni. Con questa configurazione, possiamo iniziare a lavorare sull'output di qualcosa, quindi l'immagine

86
00:07:42,230 --> 00:07:47,330
ha bisogno di una fonte e otterremo un'immagine di rete qui perché se dai un'occhiata ai dati

87
00:07:47,330 --> 00:07:52,940
fittizi, tutti questi URL di immagini qui sono URL, è anche quello che nel modello, ci aspettiamo un URL

88
00:07:52,940 --> 00:07:54,260
qui, quindi per

89
00:07:54,290 --> 00:07:59,480
un'immagine di rete e questo sarebbe ovviamente il default per qualsiasi negozio che costruisci perché non includerai

90
00:07:59,480 --> 00:08:06,740
mai tutte le immagini del prodotto nella tua app, almeno se non è presente in app shop per un gioco, ma se si tratta

91
00:08:06,740 --> 00:08:09,070
di un negozio in cui le persone possono

92
00:08:09,110 --> 00:08:14,070
creare prodotti, ovviamente le persone creeranno prodotti in modo dinamico dopo che l'app è stata distribuita,

93
00:08:14,240 --> 00:08:20,300
quindi è impossibile per te includere tutte le immagini nella tua app, invece devono essere archiviate su un server .

94
00:08:21,450 --> 00:08:26,740
Quindi quindi qui, abbiamo bisogno di passare un oggetto all'origine in cui impostiamo la proprietà URI

95
00:08:26,910 --> 00:08:32,120
e che ora verrà ricevuto dall'esterno perché questo componente dell'articolo del prodotto è di presentazione,

96
00:08:32,130 --> 00:08:38,060
quindi tutti i dati da visualizzare devono essere passati attraverso i puntelli e lì, noi potresti aspettarti il

97
00:08:38,070 --> 00:08:40,680
puntello dell'immagine ma come per tutti i

98
00:08:40,680 --> 00:08:47,610
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

99
00:08:47,610 --> 00:08:52,740
aspetto di ottenere un prezzo prop, terrò il segno del dollaro qui a proposito perché il prezzo sarà solo un numero e ovviamente

100
00:08:52,740 --> 00:08:55,210
voglio avere un simbolo del dollaro di fronte a questo.

101
00:08:55,350 --> 00:09:02,640
Ora una piccola nota qui, voglio assicurarmi che il prezzo che ottengo abbia sempre esattamente due cifre decimali e possiamo ottenere

102
00:09:03,020 --> 00:09:10,520
questo chiamando chiamando fisso su questo e passando in due. A fixed è una funzione disponibile sui

103
00:09:10,560 --> 00:09:17,940
numeri in Javascript, che la converte sostanzialmente in una stringa con una quantità fissa di

104
00:09:17,940 --> 00:09:21,870
posizioni decimali e qui limito questo per essere

105
00:09:21,870 --> 00:09:23,210
sempre due

106
00:09:23,280 --> 00:09:34,310
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,

107
00:09:34,400 --> 00:09:41,960
quindi uso nuovamente un nome qui che puoi configurare o nominare come vuoi, ma l'idea qui è che i puntelli

108
00:09:41,960 --> 00:09:47,240
sulla vista punti i dettagli in una funzione che in la fine viene eseguita

109
00:09:47,240 --> 00:09:51,220
quando si preme questo pulsante e quindi qui, se

110
00:09:51,230 --> 00:09:58,900
questo pulsante, il pulsante carrello viene premuto, indicherò una funzione che mi aspetto di ottenere sul prop Aggiungi al carrello.

111
00:09:58,940 --> 00:09:59,300
Ancora

112
00:09:59,540 --> 00:10:03,650
una volta, puoi nominare questi oggetti di scena come vuoi, ma quando usi

113
00:10:03,740 --> 00:10:10,370
il tuo componente, devi assicurarti che siano disponibili e che ottengano valori che sono funzioni che poi vengono attivate attraverso questi pulsanti.

114
00:10:10,370 --> 00:10:14,300
Ora stiamo ottenendo tutti i dati. Ora per l'immagine, poiché

115
00:10:14,420 --> 00:10:21,440
questa è un'immagine di rete, dobbiamo impostare la larghezza e l'altezza perché l'immagine non può vederlo in anticipo

116
00:10:21,440 --> 00:10:24,600
poiché potrebbe farlo per un'immagine locale, non può

117
00:10:24,620 --> 00:10:31,810
farlo per una rete immagine, quindi qui indicherò gli stili. immagine e aggiungerò questa chiave immagine al mio foglio di stile lì per ora.

118
00:10:31,820 --> 00:10:37,790
Ancora una volta, dipende generalmente da te come modellare questo, ma imposterò questo per avere una larghezza di

119
00:10:37,790 --> 00:10:38,750
diciamo del

120
00:10:38,750 --> 00:10:46,580
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

121
00:10:46,580 --> 00:10:52,730
di 300 e voglio avere l'immagine lì dentro, che dovrebbe anche occupare la maggior parte dell'altezza ma ho anche

122
00:10:53,000 --> 00:10:58,520
il titolo e il prezzo e i miei pulsanti e questi dovrebbero anche adattarsi lì dentro,

123
00:10:58,520 --> 00:10:59,920
quindi io ' Darò

124
00:11:00,020 --> 00:11:02,240
all'immagine il 60% dell'altezza in modo che

125
00:11:02,360 --> 00:11:10,560
le altre cose qui possano dividere il restante 40% tra di loro. Quindi, quella è l'immagine, ora ovviamente l'immagine non è tutto

126
00:11:10,560 --> 00:11:16,230
ciò che abbiamo qui, abbiamo anche il nostro titolo, abbiamo il nostro prezzo

127
00:11:16,230 --> 00:11:18,800
e voglio anche modellare quello.

128
00:11:18,840 --> 00:11:24,980
Quindi, per il titolo, aggiungerò lo stile del titolo qui e per il prezzo, aggiungerò diciamo uno

129
00:11:25,080 --> 00:11:32,490
stile di prezzo e qui per questi pulsanti, aggiungerò anche uno stile alla vista circostante e lo chiamerò azioni e ovviamente

130
00:11:32,490 --> 00:11:41,020
tutti questi nomi di stile come sempre sono totalmente a te. Qui, voglio aggiungere il mio

131
00:11:41,050 --> 00:11:54,860
titolo, il prezzo e la proprietà actions al mio foglio di stile qui e ora per il titolo,

132
00:11:54,860 --> 00:11:59,900
puoi ovviamente modellarlo nel modo che preferisci.

133
00:11:59,910 --> 00:12:01,970
Non abbiamo caratteri personalizzati qui, ne

134
00:12:02,070 --> 00:12:05,430
aggiungerò presto alcuni ma per il momento, lo ignorerò e

135
00:12:05,610 --> 00:12:11,610
inizierò con una dimensione del carattere di 18 e voglio aggiungere un margine verticale, quindi sopra e sotto di

136
00:12:11,610 --> 00:12:21,570
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,

137
00:12:21,840 --> 00:12:30,490
quindi un po 'più piccola e darò anche a questo un colore che dovrebbe essere forse 888 che

138
00:12:30,530 --> 00:12:34,380
è come un colore grigiastro, grigio scuro.

139
00:12:34,380 --> 00:12:39,760
Ora le azioni sono posizionate su quella vista che contiene i pulsanti e quindi, voglio assicurarmi che il pulsante

140
00:12:39,760 --> 00:12:42,450
si trovi uno accanto all'altro, quindi in una riga.

141
00:12:42,670 --> 00:12:53,860
Quindi darò a questo una direzione di riga flessibile qui e giustificherò anche il contenuto per avere tutto lo spazio rimanente tra di

142
00:12:53,860 --> 00:13:02,980
loro e inoltre, voglio allineare gli elementi al centro verticalmente, quindi lungo l'asse trasversale che per una direzione

143
00:13:02,980 --> 00:13:06,910
di flessione di riga è l'asse verticale.

144
00:13:06,910 --> 00:13:08,890
Detto questo, abbiamo uno stile di base,

145
00:13:08,890 --> 00:13:14,920
ora usiamo quel componente prima di perfezionare il set up e lo stile. Quindi il componente dell'articolo del prodotto che esportiamo

146
00:13:14,920 --> 00:13:20,110
qui nel file dell'articolo del prodotto può ora essere utilizzato nel file di panoramica

147
00:13:20,110 --> 00:13:22,850
del prodotto importando l'articolo del prodotto da

148
00:13:22,870 --> 00:13:29,680
lì, quindi puntiamo alla nostra cartella dei componenti, lì nella sottocartella del negozio e quindi l'articolo del prodotto e

149
00:13:29,680 --> 00:13:35,340
ora questo è quello che voglio usare qui quando eseguo il rendering dei miei articoli.

150
00:13:35,350 --> 00:13:40,300
L'articolo del prodotto può essere un componente autochiudente perché tutti i dati vengono ricevuti attraverso oggetti di scena e

151
00:13:40,300 --> 00:13:42,650
non tra i tag di apertura e chiusura,

152
00:13:42,670 --> 00:13:45,340
ora ovviamente dobbiamo impostare tutto ciò che ci aspettiamo qui.

153
00:13:45,340 --> 00:13:50,700
Ci aspettiamo qui un'immagine, il titolo, il prezzo e i nostri due oggetti di scena per la gestione degli eventi,

154
00:13:50,710 --> 00:13:52,870
quindi è quello che dobbiamo fornire ora.

155
00:13:53,560 --> 00:13:55,390
Quindi qui sull'articolo del prodotto,

156
00:13:55,510 --> 00:14:02,140
inizierò con l'immagine e quello ovviamente è itemData. articolo. imageUrl e

157
00:14:02,140 --> 00:14:08,800
devi sempre ricordare l'articolo ItemData. l'articolo indica un prodotto come definito nel nostro modello di prodotto e

158
00:14:08,800 --> 00:14:11,910
pertanto avrà una proprietà imageUrl scritta in questo modo, se lo hai

159
00:14:11,920 --> 00:14:17,980
scritto in modo diverso, devi ovviamente accedervi in modo diverso. Oltre all'immagine, avremo anche un

160
00:14:17,980 --> 00:14:26,290
titolo che è itemData. articolo. titolo e oltre a ciò, avremo il prezzo

161
00:14:26,320 --> 00:14:28,500
con itemData. articolo. prezzo

162
00:14:28,510 --> 00:14:35,140
e quindi abbiamo i nostri due gestori di eventi qui perché abbiamo il puntello di dettaglio in vista e

163
00:14:35,140 --> 00:14:41,470
il puntello di aggiunta al carrello che dobbiamo aggiungere. Quindi i dettagli a vista faranno qualcosa in seguito, per ora

164
00:14:41,890 --> 00:14:45,150
è solo una funzione vuota e su aggiungi al carrello farà

165
00:14:45,160 --> 00:14:47,650
anche qualcosa in seguito, per ora può anche

166
00:14:47,650 --> 00:14:54,280
essere una funzione vuota, ecco come dovrebbe essere reso il nostro prodotto. Detto questo, se lo salviamo, questo è

167
00:14:54,320 --> 00:14:57,850
ciò che dovresti vedere, non è ancora perfetto, ma

168
00:14:57,860 --> 00:15:01,640
ci stiamo arrivando, in realtà non è poi così male.

169
00:15:01,700 --> 00:15:07,300
Ora, naturalmente, ciò che noti è che i pulsanti sono colorati nel modo sbagliato, che questo spazio

170
00:15:07,300 --> 00:15:12,460
non è realmente utilizzato nel modo in cui dovrebbe essere usato laggiù, che forse vogliamo

171
00:15:12,460 --> 00:15:21,050
anche centrare questo testo ma queste sono ovviamente cose possiamo lavorarci su. Quindi, per perfezionarlo, torniamo al componente dell'articolo del prodotto qui, iniziamo

172
00:15:21,100 --> 00:15:23,900
con i nostri due testi qui.

173
00:15:23,950 --> 00:15:30,790
Dovrebbero ovviamente essere centrati e ciò può essere fatto in un modo molto semplice avvolgendolo con una vista,

174
00:15:30,790 --> 00:15:37,200
spostando questi due testi lì dentro, dando a quella vista uno stile e ovviamente puoi nominarlo

175
00:15:37,250 --> 00:15:38,830
come preferisci, lo

176
00:15:38,840 --> 00:15:43,930
chiamerò i dettagli perché abbiamo un po 'di layout i dettagli del prodotto

177
00:15:44,090 --> 00:15:52,710
lì, quindi aggiungerò il mio stile di dettagli qui al foglio di stile e lì, imposterò semplicemente allineare gli oggetti al centro.

178
00:15:52,880 --> 00:16:00,440
Questo utilizza una direzione flessibile della colonna, il valore predefinito e quindi si centra sull'asse trasversale, lo fa sempre, ma

179
00:16:00,440 --> 00:16:04,870
l'asse trasversale per la colonna della direzione flessibile è ovviamente da

180
00:16:04,880 --> 00:16:12,920
sinistra a destra, quindi centra orizzontalmente che è quello che voglio qui e io ' Darò anche questo un altezza del 15%.

181
00:16:12,930 --> 00:16:16,830
Tieni presente che l'immagine occupa il 60%, quindi diamo questo forse

182
00:16:16,830 --> 00:16:21,070
il 15%, quindi quasi la metà del restante 40%, non proprio la metà

183
00:16:21,270 --> 00:16:24,960
E aggiungerò un po 'di imbottitura qui del 10 forse.

184
00:16:24,960 --> 00:16:31,780
E per i pulsanti qui, questi sono nella proprietà delle mie azioni, lì voglio

185
00:16:31,800 --> 00:16:36,340
impostare l'altezza sul rimanente 25%, che dovrebbe essere una

186
00:16:36,550 --> 00:16:41,300
stringa ovviamente perché qui abbiamo il 60% di altezza, quindi

187
00:16:41,460 --> 00:16:43,360
qui abbiamo il

188
00:16:43,450 --> 00:16:50,860
15%, quindi qui Voglio mantenere il restante 25% e se ora lo salviamo, sembra molto meglio.

189
00:16:50,860 --> 00:16:54,360
Ora un po 'di padding a sinistra e a destra sarebbe anche

190
00:16:54,370 --> 00:17:01,810
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

191
00:17:01,810 --> 00:17:05,230
interna a sinistra oa destra. Ora per cambiare il colore

192
00:17:05,290 --> 00:17:10,540
dei pulsanti, possiamo semplicemente andare ai componenti dei pulsanti che sono integrati in

193
00:17:10,550 --> 00:17:12,140
React Native e impostare

194
00:17:12,170 --> 00:17:18,250
qui il prop di colore sui colori che è quindi necessario importare dalla cartella delle

195
00:17:18,260 --> 00:17:19,530
costanti e

196
00:17:19,630 --> 00:17:30,510
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.

197
00:17:30,550 --> 00:17:32,220
Quindi ora abbiamo i

198
00:17:32,320 --> 00:17:37,090
nostri pulsanti qui, aggiungi al carrello e visualizza i dettagli e questo non sembra male.

199
00:17:37,120 --> 00:17:41,860
L'unica cosa che potresti notare è che non abbiamo angoli arrotondati qui in alto e

200
00:17:41,860 --> 00:17:48,280
la ragione di ciò è che la nostra immagine è fondamentalmente come una sovrapposizione al nostro sfondo e lo sfondo

201
00:17:48,280 --> 00:17:49,570
è la vista

202
00:17:49,570 --> 00:17:53,800
circostante, l'immagine non ha angoli arrotondati e quindi si sovrappone ai nostri angoli

203
00:17:53,800 --> 00:17:57,350
arrotondati che abbiamo sulla vista circostante. Per risolvere questo problema, possiamo

204
00:17:57,520 --> 00:18:01,200
avvolgere l'immagine in una vista separata e, come ho già detto

205
00:18:01,450 --> 00:18:05,580
in precedenza nel corso, in React Native è davvero normale avere un paio

206
00:18:05,580 --> 00:18:13,480
di viste nidificate perché a questa vista ora possiamo allegare uno stile che possiamo forse dare un identificatore del contenitore di immagini che ora

207
00:18:14,080 --> 00:18:20,350
possiamo aggiungere al nostro foglio di stile e ora fornirò a questa immagine il mio larghezza e altezza qui

208
00:18:21,040 --> 00:18:24,850
e sull'immagine, quindi aggiungerò solo una larghezza e un'altezza del 100% perché

209
00:18:24,850 --> 00:18:25,900
ora è

210
00:18:25,950 --> 00:18:27,500
all'interno di il contenitore, questo

211
00:18:27,520 --> 00:18:28,750
qui si riferisce

212
00:18:28,750 --> 00:18:31,970
al genitore, quindi a questo contenitore, quindi verrà applicata anche

213
00:18:32,110 --> 00:18:35,200
un'altezza del 60% all'immagine ma su quel contenitore dell'immagine,

214
00:18:35,200 --> 00:18:40,200
ora possiamo aggiungere un bordo in alto a sinistra raggio di 10 e un bordo

215
00:18:40,210 --> 00:18:42,020
in alto raggio giusto di

216
00:18:42,100 --> 00:18:48,520
10 in modo da aggirare questi angoli e ora importante, aggiungere l'overflow nascosto qui perché questo assicurerà che qualsiasi bambino

217
00:18:48,520 --> 00:18:53,400
che è la nostra immagine, ovviamente, non possa sovrapporsi a ciò che abbiamo impostato qui.

218
00:18:53,410 --> 00:18:57,960
Quindi ora con questa configurazione, aggiungiamo i nostri angoli arrotondati qui di nuovo all'inizio e

219
00:18:57,970 --> 00:19:02,860
ora questi sono gli elementi dell'immagine che voglio qui e, naturalmente, è anche un elenco scorrevole in

220
00:19:03,070 --> 00:19:08,110
cui vedi anche che queste immagini sono caricate in modo pigro automaticamente che puoi continuare a lavorare con.

221
00:19:08,800 --> 00:19:13,270
Naturalmente, il prossimo obiettivo potrebbe essere che possiamo anche visualizzare la schermata dei dettagli.