1
00:00:02,220 --> 00:00:06,510
Assicuriamoci di poter andare alla schermata dei dettagli del prodotto, questa schermata

2
00:00:06,510 --> 00:00:09,870
qui e per prima cosa nel componente della schermata

3
00:00:09,870 --> 00:00:13,170
dei dettagli del prodotto, quindi creerò un componente importando

4
00:00:13,170 --> 00:00:15,590
React da React. Quindi, probabilmente

5
00:00:15,620 --> 00:00:21,150
abbiamo anche bisogno di alcune cose da React Native, ad esempio non può davvero

6
00:00:21,210 --> 00:00:26,940
far male avere una vista e un testo qui e anche un foglio di stile

7
00:00:27,150 --> 00:00:32,880
e anche il componente dell'immagine, a proposito dell'ordine di queste importazioni qui ovviamente non importa.

8
00:00:32,890 --> 00:00:38,430
Voglio anche avere un pulsante lì perché voglio avere un pulsante Aggiungi al carrello anche qui

9
00:00:38,610 --> 00:00:47,250
e in realtà anche una vista di scorrimento perché questa pagina di dettaglio potrebbe avere una descrizione del prodotto molto lunga o potrebbe essere visualizzata

10
00:00:47,250 --> 00:00:52,440
su un dispositivo molto piccolo e pertanto, dovrebbe essere sicuramente scorrevole in modo da poter

11
00:00:52,440 --> 00:00:55,950
sempre vedere tutto il contenuto. Con questo qui, aggiungerò

12
00:00:55,950 --> 00:01:03,940
il componente della schermata dei dettagli del mio prodotto, di nuovo un componente funzionale in cui riceviamo oggetti di scena, imposterò il mio

13
00:01:04,210 --> 00:01:10,420
foglio di stile qui con il foglio di stile. crearlo e memorizzarlo in una costante di stili

14
00:01:10,420 --> 00:01:17,440
e, naturalmente, esportare la schermata dei dettagli del prodotto come predefinita. Detto questo, iniziamo semplice e restituiamo una vista qui con un

15
00:01:17,500 --> 00:01:26,340
testo in cui diciamo la schermata dei dettagli del prodotto che è proprio lì in modo che possiamo vedere che abbiamo navigato con successo lì e in

16
00:01:26,340 --> 00:01:29,570
modo che possiamo effettivamente utilizzare questo perché dobbiamo restituire

17
00:01:29,610 --> 00:01:34,500
jsx a avere un componente valido perché la prima cosa che voglio fare è regolare

18
00:01:34,500 --> 00:01:39,750
la navigazione e per quello in ShopNavigator. file js nella cartella di navigazione, possiamo

19
00:01:39,750 --> 00:01:42,290
importare la schermata dei dettagli del

20
00:01:42,420 --> 00:01:51,020
prodotto qui dalla nostra cartella delle schermate, la cartella del negozio e lì la schermata dei dettagli del prodotto, quindi questo è il

21
00:01:51,020 --> 00:01:51,760
file

22
00:01:51,770 --> 00:01:58,750
in cui abbiamo appena lavorato ovviamente e mapparlo qui su un identificatore, io ' lo chiamerò qui i

23
00:01:58,750 --> 00:01:59,830
dettagli del prodotto.

24
00:01:59,830 --> 00:02:03,640
Questi tasti come hai appreso nella sezione di navigazione dipendono sempre da

25
00:02:03,640 --> 00:02:06,070
te, quindi ora abbiamo mappato questa schermata.

26
00:02:06,220 --> 00:02:09,570
Questa sarà la nostra schermata iniziale perché questa è la

27
00:02:09,580 --> 00:02:14,170
prima coppia chiave-valore, questa è una schermata a cui possiamo andare però, possiamo navigare e

28
00:02:14,170 --> 00:02:20,440
andare lì, dobbiamo andare alla schermata panoramica dei nostri prodotti e quando facciamo clic su Visualizza dettaglio, questo è alla

29
00:02:20,440 --> 00:02:24,700
fine il segnale che vogliamo andare alla schermata dei dettagli di quel prodotto.

30
00:02:24,700 --> 00:02:32,140
Quindi qui in questa funzione, possiamo chiamare la navigazione di oggetti di scena, questa funzione di navigazione che hai appreso nella

31
00:02:32,140 --> 00:02:35,260
sezione di navigazione e poi lì, ti

32
00:02:35,320 --> 00:02:40,170
ho mostrato una sintassi in cui passi un oggetto Javascript in cui hai

33
00:02:40,180 --> 00:02:46,340
impostato un nome di rotta, che potrebbe essere dettagli del prodotto e questo ti porterà sullo schermo.

34
00:02:46,340 --> 00:02:47,920
Quindi ora lo salviamo e

35
00:02:47,930 --> 00:02:55,430
facciamo clic su Visualizza dettagli, infatti andiamo alla schermata dei dettagli del prodotto. Ora, come annotazione nella sezione di navigazione, ti ho

36
00:02:55,430 --> 00:02:55,980
anche

37
00:02:55,990 --> 00:03:02,270
mostrato che la sintassi alternativa è che passi il nome della schermata come primo argomento da

38
00:03:02,270 --> 00:03:03,970
navigare, quindi puoi farlo

39
00:03:03,980 --> 00:03:09,080
anche tu e funzionerà come bene. Se lo testiamo anche su

40
00:03:09,080 --> 00:03:11,750
Android, ecco come possiamo andare lì.

41
00:03:11,940 --> 00:03:19,410
Ora ovviamente l'obiettivo non è solo quello di andare lì, ma anche di inoltrare i nostri dati o il nostro ID del prodotto almeno in modo

42
00:03:19,410 --> 00:03:25,200
da poter caricare i dati del prodotto all'interno del componente. Quindi come secondo argomento qui, passo un oggetto Javascript che

43
00:03:25,710 --> 00:03:30,380
sarà il mio parametro per questa azione di navigazione e lì puoi avere tutte le

44
00:03:30,510 --> 00:03:36,060
coppie chiave-valore che desideri, aggiungerò qui un campo ID prodotto, di nuovo questo nome è totalmente dipende da te

45
00:03:36,090 --> 00:03:42,120
e questo sarà itemData. articolo. id perché itemData. l'articolo punta su

46
00:03:42,120 --> 00:03:48,480
un singolo prodotto che ha l'aspetto che abbiamo impostato qui nei modelli e questo ha un

47
00:03:48,480 --> 00:03:55,350
ID ID, quindi ovviamente possiamo accedervi qui e inoltrarlo. Detto questo, nella schermata dei dettagli del prodotto, possiamo

48
00:03:55,380 --> 00:04:01,410
estrarlo ovviamente, è anche qualcosa che hai imparato in precedenza e che puoi semplicemente praticare qui.

49
00:04:01,410 --> 00:04:11,880
Possiamo ottenere il nostro ID prodotto qui semplicemente chiamando la navigazione di oggetti di scena ottenendo l'ID prodotto param e questo

50
00:04:11,880 --> 00:04:17,160
estrarrà il nostro ID prodotto dai parametri che abbiamo ricevuto.

51
00:04:17,180 --> 00:04:22,580
Ora possiamo usare quell'ID per ottenere il nostro prodotto e ovviamente i nostri prodotti sono archiviati in Redux.

52
00:04:22,640 --> 00:04:29,510
Quindi alla fine dobbiamo importare il selettore di utilizzo qui da React Redux, in modo che possiamo usarlo per selezionare

53
00:04:29,510 --> 00:04:30,830
un singolo prodotto,

54
00:04:30,830 --> 00:04:37,220
diciamo il nostro prodotto selezionato, questo nome costante è ovviamente anche a te, ora è selezionato con l'aiuto del

55
00:04:37,220 --> 00:04:43,010
selettore di utilizzo che riceve il nostro stato, il nostro stato Redux e quindi possiamo eseguire il

56
00:04:43,070 --> 00:04:51,420
drill nella sezione prodotti, ancora una volta quel nome della sezione è quello che usi qui nei prodotti di riduttori combinati nel mio caso e

57
00:04:51,470 --> 00:04:54,650
lì possiamo ottenere un accesso a tutti i prodotti

58
00:04:54,680 --> 00:04:59,230
disponibili ma di ovviamente qui non voglio caricare tutti i prodotti disponibili ma

59
00:04:59,240 --> 00:05:06,650
invece, posso usare il metodo find per trovare un singolo prodotto con quella funzione che passo per trovare che gira su ogni

60
00:05:06,650 --> 00:05:12,560
articolo dell'array dove otteniamo il prodotto dove questa funzione restituisce true e dovrebbe restituire true se l'ID

61
00:05:12,560 --> 00:05:18,290
del prodotto che sto guardando è uguale all'ID prodotto che ho estratto dai parametri del percorso.

62
00:05:18,290 --> 00:05:23,470
Questo è il modo in cui selezioniamo un singolo prodotto e questo singolo prodotto può quindi essere

63
00:05:23,470 --> 00:05:32,930
utilizzato qui, quindi qui potremmo produrre il prodotto selezionato. titolo per esempio. Se ora lo salviamo e visualizziamo i dettagli, anzi

64
00:05:32,930 --> 00:05:33,860
qui vedo

65
00:05:33,860 --> 00:05:37,970
la camicia rossa, se lo faccio per il tappeto blu, vedo qui

66
00:05:37,970 --> 00:05:41,590
il tappeto blu, quindi funziona. Sarebbe bello vedere che

67
00:05:41,720 --> 00:05:43,110
anche nell'intestazione

68
00:05:43,280 --> 00:05:53,810
e ci sono due opzioni, ora potremmo usare gli oggetti di scena. set di navigazione param qui e avvolgi anche questo nel richiamo dell'effetto use, sarebbe meglio

69
00:05:53,810 --> 00:05:55,030
impostare il nostro

70
00:05:55,030 --> 00:06:01,880
titolo con set param e usarlo qui nelle opzioni di navigazione che dobbiamo aggiungere ai dettagli dei prodotti per estrarlo

71
00:06:01,880 --> 00:06:07,690
o effettivamente un po ' più facile, andiamo alla panoramica del prodotto che è dove andiamo a

72
00:06:07,700 --> 00:06:12,710
quella pagina e oltre a passare l'ID del prodotto, passiamo anche il titolo del

73
00:06:12,710 --> 00:06:17,000
prodotto perché qui lo abbiamo facilmente disponibile e lo otteniamo con l'aiuto

74
00:06:17,000 --> 00:06:20,120
di itemData. articolo. titolo.

75
00:06:20,150 --> 00:06:25,400
Ora impostiamo anche questo parametro e questo rende semplicissimo estrarlo nella schermata dei

76
00:06:25,820 --> 00:06:31,490
dettagli del prodotto, lì nelle opzioni di navigazione, possiamo solo ora aggiungere opzioni di navigazione

77
00:06:33,930 --> 00:06:40,440
nella schermata dei dettagli del prodotto e questo è ora il modulo funzionale perché dobbiamo estrarre questo

78
00:06:41,730 --> 00:06:48,390
in modo dinamico dai nostri parametri di rotta. Quindi qui otteniamo questo oggetto dati di navigazione che

79
00:06:48,420 --> 00:06:55,590
ha anche un supporto di navigazione, dobbiamo restituire il nostro oggetto Javascript, le nostre opzioni di navigazione configurano l'oggetto qui, queste dovrebbero

80
00:06:55,620 --> 00:07:07,770
essere opzioni ovviamente e lì, possiamo impostare il titolo dell'intestazione su navData. navigazione. Titolo del prodotto getParam o qualunque cosa tu

81
00:07:07,830 --> 00:07:11,170
abbia scelto come identificatore per questo.

82
00:07:11,190 --> 00:07:17,060
Quindi qui sto usando il titolo del prodotto perché nella schermata di panoramica del prodotto, lo sto impostando sul titolo del prodotto.

83
00:07:19,600 --> 00:07:25,600
Detto questo, stiamo impostando questa intestazione, vediamo se funziona, se proviamo ad andare a quella

84
00:07:25,900 --> 00:07:27,130
schermata, sembra

85
00:07:27,130 --> 00:07:34,560
buono, ora vediamo anche il titolo del prodotto qui nell'intestazione. Funziona.

86
00:07:34,560 --> 00:07:39,420
Ora ho accennato in precedenza che non dovremmo essere in grado di andare

87
00:07:39,420 --> 00:07:41,840
lì premendo i dettagli di visualizzazione,

88
00:07:42,170 --> 00:07:47,930
ma forse anche premendo il prodotto in generale e per questo, possiamo andare all'elemento del prodotto

89
00:07:47,930 --> 00:07:51,310
e lì ovviamente abbiamo il pulsante Visualizza dettagli ma

90
00:07:51,440 --> 00:08:01,000
ora possiamo avvolgere l'intero oggetto in modo tangibile e lì possiamo usare l'opacità tangibile e avvolgere l'intero oggetto con opacità tangibile, quindi avvolgi questo intorno alla nostra

91
00:08:01,160 --> 00:08:04,430
intera vista qui, questi pulsanti saranno ancora attivati autonomamente

92
00:08:04,430 --> 00:08:09,110
ma ora possiamo anche premere altrove e lì su Stampa, ora voglio anche

93
00:08:09,130 --> 00:08:09,900
attivare

94
00:08:09,920 --> 00:08:15,710
lo stesso, il pulsante Visualizza dettagli lo fa, voglio attivare la funzione che riceviamo sui dettagli

95
00:08:15,740 --> 00:08:22,730
di visualizzazione, quindi lo inoltrerò semplicemente per visualizzare i dettagli. E che con quel semplice cambiamento, possiamo premere ovunque

96
00:08:22,730 --> 00:08:28,970
su questo oggetto per essere portati alla schermata dei dettagli, anche su Android dove questo comunque sembra

97
00:08:28,970 --> 00:08:34,080
un po 'brutto e in generale, sarebbe bello avere questo effetto a catena lì.

98
00:08:34,220 --> 00:08:36,980
Ora hai anche imparato come implementarlo, dobbiamo

99
00:08:37,070 --> 00:08:44,760
importare feedback nativi tangibili per questo e l'API della piattaforma, quindi questo oggetto piattaforma e ora qui nell'elemento

100
00:08:44,760 --> 00:08:52,980
del prodotto, possiamo impostare il nostro componente toccabile qui o come vuoi nominarlo , dovrebbe avere un carattere maiuscolo in

101
00:08:52,980 --> 00:08:58,650
modo che possiamo usarlo come elemento jsx e questo per impostazione predefinita indica

102
00:08:58,660 --> 00:09:00,710
opacità tangibile diciamo ma

103
00:09:00,720 --> 00:09:10,050
se il sistema operativo della piattaforma è uguale ad Android e la versione della piattaforma è maggiore o uguale a 21 che

104
00:09:10,050 --> 00:09:13,240
è la versione Android dobbiamo supportare l'effetto

105
00:09:13,440 --> 00:09:22,410
a catena, possiamo impostare un cmp tangibile uguale al feedback nativo tangibile e ora possiamo sostituire l'opacità tangibile laggiù con un cmp

106
00:09:22,410 --> 00:09:23,100
tangibile,

107
00:09:24,210 --> 00:09:28,120
quindi con quella variabile che contiene due diversi tipi

108
00:09:28,220 --> 00:09:34,040
di componenti a seconda di dove sta funzionando e ora se fai questo, abbiamo

109
00:09:34,850 --> 00:09:40,330
ancora quell'effetto di opacità qui ma abbiamo un effetto a catena su Android.

110
00:09:40,340 --> 00:09:48,980
Tuttavia, solo laggiù, non sull'immagine e anche non rispettando i nostri angoli arrotondati, come puoi

111
00:09:48,980 --> 00:09:49,930
vedere.

112
00:09:50,390 --> 00:09:52,770
Ora per risolvere il problema che

113
00:09:52,850 --> 00:09:56,500
non è presente nell'immagine, tutto quello che dobbiamo fare è cambiare

114
00:09:56,690 --> 00:10:01,990
lì una configurazione, non ci resta che aggiungere qui il prop di utilizzo in primo piano.

115
00:10:02,050 --> 00:10:07,570
Ora sull'opacità toccabile, questo non avrà alcun effetto ma sul feedback nativo toccabile, questo assicura che

116
00:10:07,570 --> 00:10:12,850
l'effetto ondulazione non si applica allo sfondo ma in realtà al primo piano, il che

117
00:10:12,910 --> 00:10:19,180
significa anche agli elementi che sono posizionati sopra il nostro toccabile o all'interno di il nostro componente toccabile.

118
00:10:19,180 --> 00:10:25,360
Quindi quindi ora, questo è anche sull'immagine e per rispettare gli angoli, gli angoli arrotondati, lo

119
00:10:25,360 --> 00:10:27,560
farò in modo un

120
00:10:27,670 --> 00:10:33,840
po 'diverso, aggiungerò un componente toccabile all'interno della mia vista circostante invece che all'esterno, come

121
00:10:35,550 --> 00:10:42,860
quello e ora qui aggiungerò un overflow nascosto su quello stile di prodotto che è in quella vista che

122
00:10:42,870 --> 00:10:48,260
ora è attorno al mio componente tangibile. Con ciò, tuttavia, la mia ombra si perde come puoi

123
00:10:48,260 --> 00:10:55,710
dire e qui ora ricevo anche un errore che mi serve un singolo figlio di React. Quindi effettivamente modificarlo un po 'e aggiungiamo

124
00:10:55,710 --> 00:11:01,590
una vista extra qui, una vista extra che avvolge tutto, il mio

125
00:11:01,590 --> 00:11:11,370
intero componente toccabile all'interno di quella vista esterna e su quella vista extra, aggiungerò uno stile di stili toccabili o

126
00:11:11,370 --> 00:11:19,090
altro vuoi nominarlo e questo stile toccabile è ora aggiunto qui nel mio foglio di stile.

127
00:11:19,180 --> 00:11:21,260
Questo ora ottiene il puntello

128
00:11:21,370 --> 00:11:28,090
nascosto di overflow, quindi aggiungiamo questo qui e questo ora riceve anche lo stesso raggio del bordo che abbiamo sull'intero

129
00:11:28,090 --> 00:11:36,000
carrello, quindi un raggio del bordo di 10 qui e questo assicurerà ora di mantenere la nostra ombra, in modo che ancora funziona

130
00:11:36,000 --> 00:11:41,220
perché l'overflow nascosto avrebbe ritagliato questo e ora anche per sbarazzarci di quell'altro errore qui,

131
00:11:41,220 --> 00:11:47,230
possiamo semplicemente avvolgere ancora un'altra vista su tutto il contenuto all'interno del componente toccabile in modo da

132
00:11:47,240 --> 00:11:52,890
soddisfare questi criteri di avere un solo elemento figlio nel componente toccabile e ora con quello,

133
00:11:52,890 --> 00:11:58,620
abbiamo lo stesso comportamento di prima su iOS. Il carrello a proposito non attiva questa

134
00:11:58,620 --> 00:12:01,940
navigazione dei dettagli che è buona e su Android, ora

135
00:12:02,070 --> 00:12:06,780
abbiamo anche quell'effetto a catena che rispetta i nostri angoli arrotondati che ci

136
00:12:07,050 --> 00:12:12,270
porta alla vista dei dettagli e al carrello non fa ciò che non dovrebbe .

137
00:12:12,270 --> 00:12:15,050
Quindi, ora che abbiamo la navigazione di cui abbiamo bisogno,

138
00:12:15,060 --> 00:12:17,210
abbiamo l'aspetto di cui abbiamo bisogno qui.

139
00:12:17,490 --> 00:12:23,490
Ora possiamo andare alla pagina dei dettagli e ora dovremmo forse assicurarci che questa pagina dei dettagli appaia anche come dovrebbe

140
00:12:23,490 --> 00:12:24,020
essere.