1
00:00:02,210 --> 00:00:04,450
Sugli articoli del carrello.

2
00:00:04,730 --> 00:00:08,030
Ancora una volta, creerò un componente separato per ogni articolo del carrello

3
00:00:08,030 --> 00:00:09,240
che voglio produrre qui.

4
00:00:09,260 --> 00:00:15,200
Potrei farlo qui ma, di nuovo, sarà un po 'più lungo e non voglio gonfiare questo file con esso e

5
00:00:15,200 --> 00:00:19,500
in realtà lo userò anche in un altro posto dopo, il che potrebbe sembrare strano

6
00:00:19,610 --> 00:00:23,930
dato che abbiamo solo una schermata del carrello ma vedrai dove altro potremo utilizzare un

7
00:00:23,930 --> 00:00:25,750
articolo del carrello in seguito.

8
00:00:25,760 --> 00:00:30,890
Quindi, torniamo alla cartella dei componenti e lì forse nella cartella del negozio e

9
00:00:30,920 --> 00:00:33,680
aggiungiamo un CartItem. file js accanto all'elemento del prodotto.

10
00:00:33,710 --> 00:00:37,480
Ora ovviamente abbiamo un normale componente React lì dentro, quindi conosci il

11
00:00:37,490 --> 00:00:38,850
gioco, come vengono creati.

12
00:00:39,080 --> 00:00:44,630
Importiamo React da React e quindi qui poiché questo è il componente che dovrebbe produrre qualcosa, importeremo

13
00:00:44,630 --> 00:00:50,170
un mucchio di componenti da React Native, i primitivi fondamentali con cui abbiamo costruito l'interfaccia utente.

14
00:00:50,300 --> 00:00:57,990
Avrò bisogno di una vista, avrò bisogno di un testo, avrò sicuramente bisogno di un foglio di stile qui e poi aggiungerò la mia costante qui, carrello

15
00:00:57,990 --> 00:01:06,210
che riceve oggetti di scena e alla fine qui restituirà un codice jsx. Aggiungerò qui l'oggetto mio stile con

16
00:01:06,210 --> 00:01:09,340
la creazione del

17
00:01:09,480 --> 00:01:16,050
foglio di stile e lo esporterò come articolo carrello predefinito.

18
00:01:16,170 --> 00:01:21,540
Ora il codice jsx che dovrebbe essere restituito qui ovviamente dipende sempre da te, ma avrò una

19
00:01:21,540 --> 00:01:28,070
vista qui e in quella vista, voglio produrre la quantità e il titolo ovviamente, anche l'importo totale per questo articolo del

20
00:01:28,290 --> 00:01:34,080
carrello nel caso ne abbiamo aggiunto più di uno, quindi questo non è solo il prezzo di un singolo

21
00:01:34,080 --> 00:01:39,780
articolo, ma ovviamente il prezzo è la quantità e in realtà voglio anche avere un pulsante che mi

22
00:01:39,780 --> 00:01:41,730
consente di eliminare questo articolo dal

23
00:01:41,730 --> 00:01:43,460
carrello, un'icona del cestino.

24
00:01:44,070 --> 00:01:53,180
Quindi alla fine, avrò una riga qui con un testo e questo testo avrà la quantità e il titolo, quindi lì avrò

25
00:01:53,420 --> 00:02:02,850
la quantità e il titolo e in realtà questo dovrebbe avere uno stile diverso, quindi avvolgerò il quantità qui in un nodo di

26
00:02:02,850 --> 00:02:09,540
testo separato e faccio lo stesso per il titolo, in modo che io abbia due nodi

27
00:02:10,650 --> 00:02:21,600
di testo separati qui alla fine e quindi dopo questo blocco di testo qui, ci dovrebbe essere una vista per raggruppare altri due elementi insieme, un

28
00:02:21,600 --> 00:02:28,060
altro pezzo di testo che rappresenta l'importo totale per questo elemento qui, quindi importo

29
00:02:28,110 --> 00:02:35,280
e accanto a questo, un pulsante o in realtà non un pulsante ma in realtà un'icona selezionabile.

30
00:02:35,280 --> 00:02:40,740
Quindi costruirò la mia cosa tangibile con opacità tangibile e, naturalmente, potresti ancora fare

31
00:02:40,740 --> 00:02:46,650
quella differenziazione della piattaforma per l'effetto increspatura, ma andrò con l'opacità su entrambe le piattaforme

32
00:02:47,370 --> 00:02:54,090
qui e importerò Ionicon da @ expo / vector-icons che abbiamo già aggiunto prima perché voglio avere

33
00:02:54,090 --> 00:02:55,110
solo un'icona

34
00:02:55,110 --> 00:03:00,480
qui che possiamo premere, quindi qui voglio avere un'opacità tangibile e avvolgerla attorno

35
00:03:00,470 --> 00:03:07,040
a un'icona che possiamo aggiungere con Ionicon come hai aggiunto in precedenza in questo corso, con questo

36
00:03:07,100 --> 00:03:13,340
come un componente qui e quindi usa semplicemente un nome che dovrebbe effettivamente differire per piattaforma

37
00:03:13,340 --> 00:03:19,190
perché il nome è l'identificatore dell'icona e lì, possiamo controllare il sistema operativo della piattaforma

38
00:03:19,190 --> 00:03:29,670
e se quello è Android, l'icona che dovrebbe essere utilizzata avrà un nome di md trash e altrimenti sarà il cestino di iOS che rende una bella

39
00:03:29,670 --> 00:03:37,410
icona del cestino e possiamo anche dare a questa icona una dimensione di diciamo 23 che di nuovo dovrebbe apparire

40
00:03:37,410 --> 00:03:43,890
abbastanza carina e un colore e qui, userò effettivamente il rosso perché sta rimuovendo questo oggetto in

41
00:03:43,890 --> 00:03:52,490
modo che dovrebbe avere come un warni di colore direi. L'opacità toccabile quando premuta dovrebbe fare qualcosa e dovrebbe inoltrare l'evento stampa al

42
00:03:52,490 --> 00:03:54,520
componente che utilizza il componente

43
00:03:54,520 --> 00:04:00,460
articolo carrello, quindi mi aspetto di ottenere un puntello su rimozione, questo nome come sempre dipende da

44
00:04:00,460 --> 00:04:11,170
te che detiene una funzione che è nella fine eseguito quindi e possiamo anche aggiungere uno stile qui, stile molto semplice in cui punto il pulsante Elimina per esempio e questa è

45
00:04:11,170 --> 00:04:14,360
una dichiarazione di stile che possiamo aggiungere in seguito.

46
00:04:14,380 --> 00:04:17,120
Parlando di stili, ci sono ovviamente più

47
00:04:17,260 --> 00:04:22,420
stili da aggiungere, ad esempio nella vista più in alto qui, darò a

48
00:04:22,420 --> 00:04:25,390
questo uno stile di carrello, questo testo qui

49
00:04:27,910 --> 00:04:29,410
riceverà forse uno

50
00:04:29,410 --> 00:04:37,060
stile di dati di un articolo. Questo testo con la quantità può ricevere uno stile che possiamo nominare stili. quantità, ancora una volta tutti

51
00:04:37,060 --> 00:04:40,720
questi identificatori di stile come sempre dipendono da te.

52
00:04:41,020 --> 00:04:43,600
Qui sul titolo, ho uno stile

53
00:04:44,970 --> 00:04:53,970
del titolo e poi qui in questa vista, aggiungerò di nuovo uno stile dei dati degli oggetti, quindi riutilizzerò questo stile perché voglio

54
00:04:53,970 --> 00:05:05,760
avere lo stesso set qui e questo importo qui anche ottenere uno stile di importo. Quindi un sacco di stili da aggiungere, passiamo al foglio di stile

55
00:05:05,760 --> 00:05:09,230
e lì dentro, aggiungiamo l'articolo del carrello

56
00:05:09,450 --> 00:05:13,640
che è il nostro stile di root, quindi

57
00:05:13,970 --> 00:05:16,620
i dati e la quantità

58
00:05:16,850 --> 00:05:18,500
degli articoli, quindi

59
00:05:20,780 --> 00:05:21,890
la

60
00:05:23,500 --> 00:05:33,140
quantità di dati dell'articolo, quindi il titolo qui e la quantità e l'ultima ma non almeno, il pulsante Elimina.

61
00:05:33,140 --> 00:05:38,490
Quindi è anche qualcosa che dobbiamo aggiungere qui. Ora sul pulsante Elimina, è semplice, aggiungerò

62
00:05:38,500 --> 00:05:39,100
solo

63
00:05:39,100 --> 00:05:46,930
un margine a sinistra di 20 per avere una spaziatura tra l'icona e il testo che si trova accanto ad essa

64
00:05:46,930 --> 00:05:52,070
e con quello, andiamo all'elemento del carrello.

65
00:05:52,110 --> 00:05:57,010
Lì, voglio avere un'imbottitura di 10, un colore di sfondo bianco, non userò il

66
00:05:57,010 --> 00:06:01,930
mio aspetto della carta qui, non aggiungerò un'ombra qui, potresti farlo ma preferisco un aspetto

67
00:06:01,930 --> 00:06:02,420
diverso.

68
00:06:02,560 --> 00:06:06,700
Importante è la riga di direzione flessibile in modo che tutti gli elementi in quella vista, così

69
00:06:06,700 --> 00:06:13,330
questo testo e questa vista siano seduti uno accanto all'altro nella stessa riga. Giustifica il contenuto dovrebbe essere spazio tra in modo

70
00:06:13,330 --> 00:06:21,720
che tutti gli spazi vuoti tra questi due blocchi di contenuto e aggiungerò anche un margine in direzione orizzontale di 20 in

71
00:06:22,380 --> 00:06:24,660
modo che ci sia una

72
00:06:24,880 --> 00:06:29,250
spaziatura a sinistra e a destra attorno agli articoli del mio carrello.

73
00:06:29,880 --> 00:06:36,000
Ora i dati degli articoli, questo è lo stile che ripetiamo per quantità, titolo e quantità e il

74
00:06:36,630 --> 00:06:46,360
pulsante Elimina, i dati degli articoli dovrebbero avere una riga di direzione flessibile per assicurarsi che gli articoli in essi contenuti siano posizionati in una riga e imposterò l'allineamento

75
00:06:46,360 --> 00:06:55,370
degli articoli qui su centra per centrare tutto il contenuto in verticale. Ora per la quantità qui, voglio impostare una famiglia di caratteri

76
00:06:55,370 --> 00:07:05,440
di open-sans, a proposito, in realtà possiamo anche usare una vista qui invece di un testo attorno a questi due nodi di testo perché non

77
00:07:05,440 --> 00:07:10,220
sto impostando stili di testo specifici qui , quindi diamo un'occhiata invece,

78
00:07:10,360 --> 00:07:15,430
ma con quello, torniamo alla quantità. Possiamo dare a questo una

79
00:07:15,430 --> 00:07:22,240
famiglia di caratteri open-sans, un colore forse di questo colore grigio scuro che abbiamo usato prima

80
00:07:22,240 --> 00:07:27,820
per i prezzi, ora per la quantità e una dimensione del carattere di 16

81
00:07:27,820 --> 00:07:35,740
forse e poi qui per il titolo, imposterò un la famiglia di caratteri di open sans in grassetto per renderlo

82
00:07:35,740 --> 00:07:43,760
audace, date anche a questo una dimensione del carattere di 16 e sulla quantità qui, farò esattamente la stessa cosa.

83
00:07:46,090 --> 00:07:52,960
Pertanto, ovviamente, potremmo anche unire questo nello stesso stesso stile, magari nominare questo testo principale o qualcosa del genere, sbarazzarci

84
00:07:52,960 --> 00:07:53,820
della quantità

85
00:07:53,830 --> 00:08:00,010
poiché abbiamo le stesse identiche definizioni di stile e ora usiamo il testo principale qui invece del

86
00:08:00,010 --> 00:08:02,350
titolo e qui invece di importo.

87
00:08:05,070 --> 00:08:05,710
Va bene.

88
00:08:05,730 --> 00:08:06,840
Questo è un

89
00:08:06,840 --> 00:08:08,900
articolo del carrello, ora usiamolo nella schermata

90
00:08:08,970 --> 00:08:11,040
del carrello con l'aiuto di un elenco

91
00:08:11,280 --> 00:08:16,080
piatto lì perché in questo momento non stiamo producendo alcun elemento lì sullo schermo del carrello.

92
00:08:16,380 --> 00:08:19,740
Quindi questa vista qui può essere sostituita con un elenco

93
00:08:19,740 --> 00:08:27,080
semplice ora e i dati in cui ci troviamo dovrebbero essere una serie di articoli del carrello ed è proprio quello

94
00:08:27,080 --> 00:08:29,030
che abbiamo qui nella costante

95
00:08:29,150 --> 00:08:31,700
degli articoli del carrello, quindi usiamo qui.

96
00:08:31,700 --> 00:08:32,240
Ora

97
00:08:32,240 --> 00:08:37,550
qui, aggiungerò anche un estrattore di chiavi e qui devi assolutamente aggiungerlo per far sapere a React Native

98
00:08:37,550 --> 00:08:43,100
dove si trova la tua chiave perché ogni articolo qui alla fine è di questo formato e questo non

99
00:08:43,190 --> 00:08:48,650
ha né una chiave né un ID proprietà ma sappiamo che l'ID prodotto può essere utilizzato come chiave perché

100
00:08:48,650 --> 00:08:49,910
sarà univoco per ogni articolo.

101
00:08:49,910 --> 00:08:54,920
Quindi qui, punto l'oggetto. productId alla fine e ora per

102
00:08:54,920 --> 00:09:00,030
l'oggetto di rendering, voglio usare questo articolo del carrello che abbiamo appena aggiunto.

103
00:09:00,140 --> 00:09:10,400
Quindi qui, dobbiamo importare l'articolo del carrello dalla cartella dei componenti, la cartella del negozio e lì, l'articolo del carrello e quindi utilizzare questo

104
00:09:11,060 --> 00:09:17,850
componente dell'articolo del carrello laggiù nella nostra funzione di rendering dove otteniamo i nostri dati dell'articolo

105
00:09:17,850 --> 00:09:26,040
alla fine e dove poi restituiamo il nostro articolo carrello come questo e ora sull'articolo carrello, dobbiamo passare alcuni

106
00:09:26,040 --> 00:09:28,240
dati, giusto? Nell'articolo del carrello,

107
00:09:28,250 --> 00:09:34,350
in questo momento ho segnaposto fittizi, ovviamente qui mi aspetto di ottenere la mia quantità diciamo su una quantità denominata

108
00:09:34,350 --> 00:09:42,080
prop, mi aspetto di ottenere il mio titolo su un titolo con nome prop e la quantità su un importo denominato prop e qui, chiamerò

109
00:09:42,090 --> 00:09:47,640
fixed to 2 per essere sicuro di avere sempre due cifre decimali lì e abbiamo anche il

110
00:09:47,660 --> 00:09:49,910
puntale on remove che ci aspettiamo giusto.

111
00:09:49,920 --> 00:09:53,830
Quindi abbiamo ottenuto quantità, titolo, importo e alla rimozione, quindi di nuovo nella schermata del

112
00:09:53,830 --> 00:10:01,780
carrello, ecco cosa dobbiamo aggiungere, la quantità è ovviamente ItemData. articolo. quantità perché un singolo

113
00:10:01,780 --> 00:10:06,740
articolo qui è ovviamente un articolo del genere e

114
00:10:06,940 --> 00:10:15,180
quindi avremo una quantità mantenuta e oltre alla quantità, dobbiamo passare il titolo, l'importo

115
00:10:15,330 --> 00:10:16,930
e rimuoverlo.

116
00:10:17,010 --> 00:10:22,860
Quindi il titolo è ovviamente itemData. articolo. Prodotto. titolo, questo è il nome

117
00:10:22,890 --> 00:10:30,810
che ho scelto lì, per importo che possiamo trasmettere in ItemData. articolo. se diamo un'occhiata al modo

118
00:10:30,810 --> 00:10:38,550
in cui definiamo i nostri dati, questa sarebbe la somma, è l'importo per un articolo, indipendentemente dalla

119
00:10:38,790 --> 00:10:42,840
quantità presente o dal rispetto della quantità effettiva.

120
00:10:43,110 --> 00:10:49,770
E poi ultimo ma non meno importante per la rimozione, dovremmo puntare a una funzione e al momento, non abbiamo una logica per questo, quindi indicherò

121
00:10:49,770 --> 00:10:50,600
solo una funzione

122
00:10:50,640 --> 00:10:57,370
vuota e questo è ora un articolo del carrello come voglio renderizzare esso. Facciamo

123
00:10:57,400 --> 00:11:07,540
una prova. Aggiungiamo due camicie rosse e un tappeto blu, andiamo al carrello e ora ho

124
00:11:07,540 --> 00:11:14,940
le stringhe di testo che devono essere renderizzate all'interno di un componente di testo e sta puntando all'elemento del carrello, linea

125
00:11:14,950 --> 00:11:17,290
14, quindi diamo un'occhiata a questo,

126
00:11:17,380 --> 00:11:23,590
sì, è qui di che il mio IDE ha aggiunto automaticamente, questo spazio bianco voglio avere qui dopo

127
00:11:23,650 --> 00:11:26,270
la mia quantità. Voglio davvero averlo qui,

128
00:11:26,440 --> 00:11:32,810
quindi aggiungerò solo uno spazio extra qui prima di chiudere il mio testo. Ora, riprovaci, due camicie rosse,

129
00:11:32,830 --> 00:11:35,530
un tappeto blu.

130
00:11:35,580 --> 00:11:36,920
Vedi l'importo qui, vedi

131
00:11:36,950 --> 00:11:38,470
il titolo qui vedi la

132
00:11:38,560 --> 00:11:41,990
somma e questo ovviamente si somma anche a questa somma totale.

133
00:11:43,580 --> 00:11:45,730
Ora è il momento di far funzionare questo pulsante di eliminazione.