1
00:00:02,250 --> 00:00:07,290
Ora che abbiamo ridotto le nozioni di base sulla navigazione, che siamo in grado

2
00:00:07,350 --> 00:00:14,200
di trasferire i dati, facciamo un passo indietro e concentriamoci sull'app che stiamo costruendo, che ovviamente non sembra così

3
00:00:14,190 --> 00:00:18,450
eccezionale e concentriamoci su questi elementi di categoria qui nella griglia.

4
00:00:18,450 --> 00:00:21,210
Possiamo toccarli ma ovviamente questa

5
00:00:21,210 --> 00:00:27,200
non è un'app che vorresti usare. Ora per renderlo più utilizzabile nella schermata

6
00:00:27,240 --> 00:00:30,400
delle categorie qui, prenderò effettivamente questo oggetto qui, questa

7
00:00:30,490 --> 00:00:36,030
opacità tangibile, quindi questo elemento della griglia e lo esternalizziamo in un componente separato, non qualcosa

8
00:00:36,030 --> 00:00:43,210
che devi fare ma qualcosa che potresti voler considerare di fare semplicemente per mantenere i tuoi componenti più snelli e puliti.

9
00:00:43,260 --> 00:00:49,890
Per quello nella cartella dei componenti, aggiungerò un CategoryGridTile. js file, il nome dipende ovviamente da

10
00:00:49,890 --> 00:00:56,400
te e lì dentro, dobbiamo importare React da React, avremo sicuramente anche bisogno di alcune cose da

11
00:00:56,400 --> 00:01:03,990
React Native per costruire un componente lì, vale a dire avremo bisogno di un'opacità tangibile di Certo, avremo bisogno della

12
00:01:04,020 --> 00:01:11,550
vista, avremo bisogno del testo e avremo bisogno di un foglio di stile in modo che possiamo anche modellarlo qui

13
00:01:11,550 --> 00:01:14,900
e ora possiamo creare qui il componente delle tessere

14
00:01:14,940 --> 00:01:22,980
della griglia della categoria che riceve alcuni oggetti di scena. Avremo bisogno di un foglio di stile

15
00:01:22,980 --> 00:01:31,110
qui che memorizzerò nella costante di stili e ovviamente come sempre, in seguito possiamo esportare il

16
00:01:31,110 --> 00:01:39,810
componente e all'interno di questa funzione del componente, restituirò il codice jsx che ho appena tagliato fuori

17
00:01:39,810 --> 00:01:46,810
dalla schermata delle categorie qui . Quindi, qui, impostata l'opacità tangibile, questo elemento della griglia è impostato ma

18
00:01:46,810 --> 00:01:52,560
dovremo cambiare un paio di cose. Nella schermata delle categorie, ad esempio, sto impostando qui lo stile degli elementi della griglia. Ora potremmo lasciarlo qui

19
00:01:52,560 --> 00:01:58,530
e in un certo senso passarlo nella nostra tessera griglia e quindi fonderlo insieme lì come l'hai

20
00:01:58,530 --> 00:02:03,510
imparato, ma imposterò semplicemente tutto lo stile nel componente stesso perché useremo solo la

21
00:02:03,540 --> 00:02:09,810
tessera griglia categoria nella griglia nella schermata delle categorie. Quindi aggiungerò lo stile degli elementi della griglia qui nel

22
00:02:09,870 --> 00:02:10,830
foglio di

23
00:02:10,860 --> 00:02:17,280
stile in questo file, quindi funziona di nuovo, il gestore onPress non funzionerà ancora, lo risolveremo presto e ora possiamo

24
00:02:17,280 --> 00:02:24,720
tornare alla schermata delle categorie e, naturalmente, importa il nostro componente. Quindi importa il componente del riquadro della griglia

25
00:02:24,750 --> 00:02:28,250
della categoria lì dalla cartella dei componenti

26
00:02:28,290 --> 00:02:37,080
e lì, il riquadro della griglia della categoria e ora restituiscilo qui quando eseguiamo il rendering di un nuovo elemento.

27
00:02:37,080 --> 00:02:38,990
Ora, ovviamente, in questo

28
00:02:39,000 --> 00:02:45,300
modo non funzionerà, dobbiamo inoltrare alcuni dati nel riquadro della griglia affinché funzioni correttamente lì

29
00:02:45,300 --> 00:02:53,880
e dobbiamo anche assicurarci che premendo questo ci navighi. Ora, passerò i dati di cui abbiamo bisogno, che è

30
00:02:53,880 --> 00:03:01,140
il titolo, quindi è ItemData. articolo. titolo e che ora è

31
00:03:01,140 --> 00:03:08,910
un oggetto di scena che possiamo usare nel riquadro della griglia della categoria e voglio anche passare un altro oggetto

32
00:03:08,940 --> 00:03:18,240
di scena che passa in una funzione che possiamo quindi eseguire per navigare e lo chiamerò suSeleziona ma puoi nominarlo come vuoi e lì

33
00:03:18,240 --> 00:03:26,700
dentro, voglio solo eseguire il codice che attualmente eseguo su onPress. Quindi taglierò questo da qui fuori dal riquadro della griglia

34
00:03:26,700 --> 00:03:33,000
di categoria, lo sposterò di nuovo nella schermata delle categorie, in questa funzione che passo a onSelect

35
00:03:33,000 --> 00:03:38,700
e ora tutto ciò che dobbiamo fare è innescare OnSelect dall'interno del riquadro della griglia

36
00:03:38,730 --> 00:03:48,110
di categoria, questo è ovviamente uno schema normale che potresti conoscere da React. Quindi di nuovo nel riquadro della griglia della categoria, onPress può semplicemente puntare

37
00:03:48,320 --> 00:03:52,390
su puntelli onSelect per attivare la funzione passata nel puntello onSelect.

38
00:03:52,550 --> 00:03:57,370
Ora il titolo che sto pubblicando qui può anche essere solo oggetti di scena. titolo perché stiamo ottenendo questo

39
00:03:57,380 --> 00:04:03,380
puntello del titolo come puntello sulla nostra griglia della categoria che stiamo passando qui.

40
00:04:05,100 --> 00:04:11,460
Detto questo, abbiamo diviso un po 'il nostro componente, ma ovviamente ora voglio anche lavorare

41
00:04:11,460 --> 00:04:17,130
un po' di più sullo stile. Quindi, tornando al riquadro della griglia di categoria,

42
00:04:17,130 --> 00:04:21,580
ad esempio, voglio usare il colore che sto impostando perché ogni categoria ha un colore

43
00:04:21,660 --> 00:04:28,620
memorizzato in quella proprietà di colore qui, quindi sarebbe bello usarlo. Quindi possiamo anche inoltrare la piastrella della griglia della categoria, inoltrare il colore

44
00:04:28,620 --> 00:04:34,070
qui, puoi ovviamente nominare questo oggetto come vuoi sull'elemento. proprietà del colore

45
00:04:34,200 --> 00:04:40,950
e qui, deve essere. color perché abbiamo chiamato il colore della proprietà qui nel modello e ora

46
00:04:40,950 --> 00:04:44,360
in un riquadro della griglia di categoria, possiamo usare quel colore per modellarlo qui.

47
00:04:44,460 --> 00:04:50,760
Quindi, come si può quindi modellare questo, come dovrebbe essere? Aggiungendo uno stile alla vista che abbiamo all'interno

48
00:04:50,760 --> 00:04:56,460
dell'opacità tangibile perché la componente di opacità tangibile stessa è invisibile ma la vista non è

49
00:04:56,460 --> 00:05:01,250
e lì, possiamo passare un oggetto e impostare qui il colore di sfondo

50
00:05:01,260 --> 00:05:04,620
su oggetti di scena. colore.

51
00:05:04,740 --> 00:05:08,860
Bene, vediamo come appare, se lo salviamo e aspettiamo che questo si ricarichi, non

52
00:05:08,950 --> 00:05:11,080
sembra troppo male ma è troppo

53
00:05:11,110 --> 00:05:15,970
piccolo, dovrebbe riempire l'intero elemento della griglia e non solo la riga con il testo lì dentro.

54
00:05:16,180 --> 00:05:25,210
Quindi, per migliorarlo, in realtà avrò questo stile in linea qui, ma lo fonderò insieme in un oggetto circostante con un'altra

55
00:05:25,210 --> 00:05:33,770
configurazione di stile che ho impostato nel foglio di stile e darò un nome a questo contenitore, puoi nominarlo come

56
00:05:33,790 --> 00:05:35,610
vuoi vuoi, contenitore

57
00:05:35,680 --> 00:05:39,270
di stili, estrai anche tutte le coppie chiave-valore

58
00:05:39,620 --> 00:05:47,450
in modo da unire questi stili qui e ora, il contenitore è un oggetto foglio di stile che

59
00:05:47,540 --> 00:05:54,530
possiamo aggiungere laggiù e qui, possiamo impostare uno flessibile per assicurarci che ogni oggetto riempie tutto

60
00:05:54,530 --> 00:05:58,880
lo spazio che ottiene e ora sembra molto meglio.

61
00:05:59,030 --> 00:06:02,330
Ora non sono ancora felice al

62
00:06:03,080 --> 00:06:10,080
100%, voglio aggiungere un po 'di raggio del bordo qui, diciamo 10 per avere degli

63
00:06:10,400 --> 00:06:14,310
angoli arrotondati e, naturalmente, puoi impostare qualsiasi stile che

64
00:06:14,570 --> 00:06:28,320
desideri qui, preferisci, io creerà anche un colore dell'ombra di nero e un'opacità dell'ombra di. 26 e un offset dell'ombra di larghezza 0, altezza 2 e un raggio dell'ombra di

65
00:06:28,380 --> 00:06:37,010
10 e un'altitudine di 3, altezza per Android se ricordi perché queste proprietà dell'ombra influiscono solo su iOS,

66
00:06:37,020 --> 00:06:42,720
in modo da ottenere un po 'di questa carta tridimensionale guarda

67
00:06:42,810 --> 00:06:48,680
e ovviamente come ho già detto, puoi modellarlo nel modo che preferisci.

68
00:06:48,690 --> 00:06:54,240
Ora, inoltre, voglio assicurarmi che questo testo si trovi nell'angolo in basso a destra e abbia

69
00:06:54,240 --> 00:06:55,380
un po

70
00:06:55,380 --> 00:07:00,960
'di imbottitura, ovviamente, un po' di spazio attorno. Quindi aggiungerò un po 'di imbottitura qui, diciamo di

71
00:07:01,140 --> 00:07:08,730
10 e ora impostiamo il contenuto giustificato su flex-end, la direzione di flessione nel contenitore ovviamente è dall'alto verso il basso perché è la colonna,

72
00:07:08,730 --> 00:07:14,340
quindi l'estremità flessibile lo sposterà nella qui e ora in basso per spostarlo anche a destra sull'asse orizzontale,

73
00:07:14,340 --> 00:07:17,100
ho impostato allineare anche gli elementi per piegare

74
00:07:17,220 --> 00:07:22,770
l'estremità e questo lo sposta alla fine dell'asse trasversale che viene lasciato da destra a destra in una

75
00:07:22,800 --> 00:07:29,900
vista normale dove non l'hai fatto cambia la direzione del flex. Con ciò, otteniamo questo aspetto che direi che è

76
00:07:29,930 --> 00:07:36,230
meglio, ma ovviamente, il testo qui, anche lo stile del testo potrebbe cambiare e un po 'più

77
00:07:36,230 --> 00:07:37,430
di riempimento potrebbe

78
00:07:37,430 --> 00:07:43,100
sembrare buono, forse 15, ma ovviamente possiamo sperimentare con questo e anche una nota a

79
00:07:43,100 --> 00:07:47,330
margine importante, in questa app non mi concentrerò sulla costruzione di

80
00:07:47,330 --> 00:07:53,450
un'esperienza totalmente reattiva qui, proverò a mantenerla breve e concisa perché l'obiettivo principale di questo modulo ovviamente

81
00:07:53,690 --> 00:07:58,720
è la navigazione, quindi non ottimizzerò questo per tutti i possibili schermi e piattaforme.

82
00:07:58,720 --> 00:08:01,200
Questo è qualcosa che puoi ovviamente fare come

83
00:08:01,250 --> 00:08:06,860
pratica, non farò aderire per non gonfiare inutilmente questo modulo, quindi creerò solo uno stile che si adatta

84
00:08:06,860 --> 00:08:08,450
bene a questi emulatori.

85
00:08:08,450 --> 00:08:14,520
Detto questo, un po 'più di padding potrebbe avere senso e voglio anche dare

86
00:08:14,720 --> 00:08:17,740
uno stile al titolo qui, quindi aggiungerò

87
00:08:17,810 --> 00:08:19,330
diciamo qui

88
00:08:19,430 --> 00:08:22,040
lo stile del titolo, impostato nel

89
00:08:22,040 --> 00:08:28,670
foglio di stile, aggiungiamolo qua e là, voglio usare la mia famiglia di caratteri, open sans

90
00:08:28,670 --> 00:08:39,110
grassetto che posso usare ovviamente perché lo sto registrando qui in app. js, quindi open sans bold è ora aggiunto qui e forse cambia anche la dimensione del

91
00:08:39,110 --> 00:08:42,870
carattere un po 'a 22. Salviamo questo,

92
00:08:42,880 --> 00:08:45,340
sembra abbastanza decente.

93
00:08:45,470 --> 00:08:48,560
Ora c'è un'ultima cosa che voglio fare sul

94
00:08:49,750 --> 00:08:58,330
riquadro della griglia della mia categoria, sul testo qui, imposterò il numero di righe su 2 in modo che qualsiasi testo che sia più lungo di

95
00:08:58,330 --> 00:09:07,800
quello in realtà venga semplicemente tagliato che penso che appaia un po 'più carino. E, ultimo ma non meno importante, potresti notare che

96
00:09:07,870 --> 00:09:14,560
su Android per la luce e adorabile, questo è a sinistra qui perché è

97
00:09:14,560 --> 00:09:19,670
suddiviso in due righe, per assicurarmi che sia anche a

98
00:09:19,720 --> 00:09:27,900
destra, sul titolo qui, imposterò allinea il testo a destra per forzare questo a essere sulla destra.

99
00:09:28,000 --> 00:09:30,420
Quindi aspettiamo che si ricarichi

100
00:09:33,070 --> 00:09:35,720
e ora sta guardando come dovrebbe.

101
00:09:35,720 --> 00:09:38,020
Ora non è poi così

102
00:09:38,060 --> 00:09:43,850
male, ora potresti notare che l'effetto appare un po 'strano se tocco un oggetto qui, otteniamo

103
00:09:43,850 --> 00:09:46,520
questo strano bordo extra attorno ad esso.

104
00:09:46,550 --> 00:09:53,750
Ora una cosa che farò ancora qui, che è totalmente facoltativa, ma comunque, la aggiungerò qui, aggiungerò l'API

105
00:09:53,750 --> 00:10:00,710
della piattaforma e aggiungerò anche un feedback nativo tangibile per utilizzare effettivamente l'effetto a catena invece dell'opacità

106
00:10:00,710 --> 00:10:02,090
tangibile se supportato.

107
00:10:02,090 --> 00:10:11,600
Quindi qui, avrò il mio componente tangibile che per impostazione predefinita è

108
00:10:11,790 --> 00:10:21,510
opacità tangibile ma se piattaforma. os equivale ad Android e come hai appreso in precedenza nel corso, la versione

109
00:10:21,510 --> 00:10:26,340
è maggiore o uguale a 21, quindi sappiamo che è supportato un feedback nativo

110
00:10:26,340 --> 00:10:31,100
tangibile, quindi imposterò un componente tangibile uguale al feedback nativo toccabile, come questo.

111
00:10:31,290 --> 00:10:35,820
Usa qui il componente tattile invece dell'opacità tangibile e con

112
00:10:35,820 --> 00:10:38,730
ciò, dovremmo avere un buon effetto a

113
00:10:38,730 --> 00:10:41,000
catena su Android, su

114
00:10:41,130 --> 00:10:46,070
iOS abbiamo l'effetto di opacità che vogliamo e su Android, ora abbiamo

115
00:10:46,080 --> 00:10:50,520
un effetto a catena ma lo styling è spento ora.

116
00:10:50,550 --> 00:10:57,830
Questo, tuttavia, è qualcosa che possiamo correggere aggiungendo una vista aggiuntiva attorno a questo che riceve qui il nostro

117
00:10:57,840 --> 00:11:01,840
stile degli elementi della griglia anziché il componente toccabile e

118
00:11:02,010 --> 00:11:08,220
con ciò, dobbiamo solo aggiungere una proprietà di stile extra sul componente toccabile e impostarne uno

119
00:11:08,220 --> 00:11:08,700
flessibile.

120
00:11:08,730 --> 00:11:10,430
Lo sto facendo con uno stile in

121
00:11:10,440 --> 00:11:16,770
linea qui veloce e sporco, potresti aggiungere uno stile separato nel foglio di stile. Con quello sembra e si sente lo stesso

122
00:11:16,800 --> 00:11:17,800
su iOS

123
00:11:17,910 --> 00:11:21,370
e ora anche su Android, l'effetto a catena è lì.

124
00:11:21,370 --> 00:11:27,870
Ora non sta usando i nostri angoli arrotondati, ma rende un quadrato o un rettangolo e in precedenza hai

125
00:11:28,080 --> 00:11:31,100
anche imparato a risolverlo. Per risolvere il problema, tutto

126
00:11:31,110 --> 00:11:35,820
ciò che dobbiamo fare è sull'elemento della griglia, aggiungiamo il raggio del bordo di

127
00:11:35,910 --> 00:11:42,930
10 e quindi aggiungiamo effettivamente l'overflow nascosto per assicurarci che gli elementi figlio non possano essere visualizzati al di fuori di

128
00:11:42,930 --> 00:11:43,950
quella vista

129
00:11:43,950 --> 00:11:49,010
di avvolgimento, il che significa che l'ondulazione l'effetto non può uscire da quella casella arrotondata.

130
00:11:49,020 --> 00:11:54,540
Ora abbiamo quello sguardo e questo è l'unico aggiustamento che voglio fare qui per piattaforme diverse

131
00:11:54,540 --> 00:11:58,050
e con quello, non sembra poi così male, direi.

132
00:11:58,050 --> 00:12:04,110
Ora, ovviamente, puoi modificarne l'aspetto, puoi modificare la dimensione del carattere e così via, renderlo davvero

133
00:12:04,110 --> 00:12:07,080
bello sui tuoi dispositivi che stai testando.

134
00:12:07,080 --> 00:12:11,940
Sono contento di questo aspetto e ora è davvero il momento di rendere anche alcune ricette quando

135
00:12:11,970 --> 00:12:13,470
selezioniamo una categoria qui.