1
00:00:02,350 --> 00:00:07,000
Nella schermata delle categorie, vogliamo assicurarci che il nostro articolo possa essere

2
00:00:07,020 --> 00:00:13,590
toccato lì, quindi importerò touchable e importerò opacità tangibile qui per avere un leggero effetto di opacità

3
00:00:13,740 --> 00:00:15,000
ma ovviamente dipende

4
00:00:15,090 --> 00:00:17,100
da te quale modello o

5
00:00:17,100 --> 00:00:23,730
quale componente usi lì, dovrebbe esserci un componente tangibile attraverso il quale avvolgi il tuo articolo qui

6
00:00:23,730 --> 00:00:24,750
e ora

7
00:00:24,750 --> 00:00:30,060
sull'opacità tangibile, aggiungerò suPress in modo che possiamo fare qualcosa quando questo viene premuto.

8
00:00:30,060 --> 00:00:31,400
Cosa vogliamo fare?

9
00:00:31,440 --> 00:00:38,760
Vogliamo andare alla schermata dei pasti della categoria che è una specie di pagina dei dettagli per una categoria scelta per mostrare tutte

10
00:00:38,760 --> 00:00:40,830
le ricette per quella categoria, non

11
00:00:40,830 --> 00:00:43,910
abbiamo ancora ricette ma voglio ancora andare alla pagina.

12
00:00:44,610 --> 00:00:50,100
Quindi quindi qui, dobbiamo attivare un'azione di navigazione e in precedenza lo abbiamo fatto con la navigazione di oggetti

13
00:00:50,280 --> 00:00:51,470
di scena, giusto?

14
00:00:51,480 --> 00:00:56,550
Il problema è che non abbiamo oggetti di scena disponibili qui perché siamo all'interno della funzione di elemento della griglia di

15
00:00:56,670 --> 00:00:59,090
rendering che è al di fuori del nostro componente.

16
00:00:59,130 --> 00:01:04,610
Ora possiamo semplicemente spostare questo all'interno del nostro componente per risolvere questo problema.

17
00:01:04,770 --> 00:01:10,470
Se creiamo quella funzione lì dentro, allora abbiamo accesso ai puntelli perché ora siamo all'interno della nostra funzione

18
00:01:10,470 --> 00:01:17,070
componente e ora saremo in grado di chiamare navigare qui. Possiamo chiamare la navigazione e voglio andare al nome di

19
00:01:17,070 --> 00:01:23,310
una rotta e, naturalmente, il nome della rotta a cui voglio andare può essere trovato nel nostro navigatore per i

20
00:01:23,310 --> 00:01:27,510
pasti di categoria, perché vogliamo caricare tutti i pasti per la categoria scelta.

21
00:01:27,510 --> 00:01:33,660
Quindi andiamo alla categoria pasti qui e se lo aggiungiamo e lo salviamo, vediamo ora che il nostro stile

22
00:01:33,660 --> 00:01:37,560
è un po 'rotto, lo risolverò in un secondo ma la navigazione

23
00:01:37,560 --> 00:01:44,520
funziona, abbiamo anche questo effetto di opacità, quindi funziona . Ora fissare lo stile è facile, l'abbiamo appena perso perché

24
00:01:44,520 --> 00:01:47,080
ho avvolto l'opacità tangibile attorno alla

25
00:01:47,220 --> 00:01:53,760
mia vista, dobbiamo solo aggiungere questo stile qui che aggiunge il margine attorno al nostro articolo e così via

26
00:01:53,760 --> 00:02:00,230
all'opacità toccabile invece di quella vista qui e con quello, abbiamo recuperato quello stile e ora funziona come dovrebbe.

27
00:02:00,270 --> 00:02:06,630
La domanda più interessante è: come possiamo effettivamente impostare il titolo dell'intestazione? Ora, per questo, abbiamo un paio

28
00:02:06,630 --> 00:02:07,720
di

29
00:02:07,800 --> 00:02:13,740
opzioni, diamo un'occhiata all'opzione numero uno. Su ogni componente di React che caricherai

30
00:02:13,740 --> 00:02:22,420
come schermata, il che significa che cosa mappi a tale nome di schermata, ad esempio nel navigatore dello stack, puoi aggiungere una proprietà.

31
00:02:22,410 --> 00:02:28,590
Ora tieni presente che lo schermo delle categorie è ovviamente un componente React ma tecnicamente è una funzione

32
00:02:28,590 --> 00:02:29,370
Javascript, giusto?

33
00:02:29,370 --> 00:02:34,290
È una funzione che riceve l'argomento props e quindi esegue questo corpo che restituisce jsx

34
00:02:34,290 --> 00:02:37,390
e quindi React è in grado di usarlo come componente

35
00:02:37,530 --> 00:02:39,840
ma tecnicamente è una funzione Javascript.

36
00:02:39,840 --> 00:02:43,490
Ora le funzioni Javascript sono solo oggetti, ovvero

37
00:02:43,500 --> 00:02:44,720
Javascript, le

38
00:02:44,790 --> 00:02:52,800
funzioni sono oggetti e sugli oggetti, possiamo aggiungere proprietà. Quindi la schermata delle categorie è solo un oggetto

39
00:02:52,890 --> 00:02:53,630
Javascript,

40
00:02:53,730 --> 00:02:57,150
quindi possiamo aggiungere una proprietà dopo averla creata.

41
00:02:57,150 --> 00:03:07,040
Quindi qui, dopo aver definito la funzione dello schermo delle nostre categorie e quindi questo oggetto, possiamo accedervi e possiamo aggiungere una

42
00:03:07,040 --> 00:03:13,250
proprietà con la notazione punto, ecco come funziona Javascript, puoi semplicemente aggiungere una

43
00:03:13,250 --> 00:03:14,250
tale proprietà.

44
00:03:14,260 --> 00:03:20,870
Ora puoi aggiungere qui una proprietà speciale per la quale verrà cercata la navigazione React e questa è la proprietà

45
00:03:21,350 --> 00:03:22,970
delle opzioni di navigazione.

46
00:03:22,970 --> 00:03:26,270
Non devi aggiungerlo e questo non sarà un problema se

47
00:03:26,270 --> 00:03:32,000
non lo fai, non l'abbiamo fatto finora ma puoi aggiungerlo, se lo aggiungi, sarà rispettato da React navigazione.

48
00:03:33,210 --> 00:03:38,480
Ora ci sono un sacco di opzioni che puoi impostare lì e un elenco completo può ovviamente

49
00:03:38,480 --> 00:03:40,120
essere trovato nei documenti ufficiali.

50
00:03:40,270 --> 00:03:45,100
Nella forma più semplice, puoi semplicemente assegnare un oggetto Javascript qui con quel

51
00:03:45,100 --> 00:03:51,880
gruppo di opzioni che ora puoi impostare in questo oggetto e l'opzione che mi interessa qui è il

52
00:03:52,030 --> 00:04:00,440
titolo dell'intestazione, che può essere semplicemente impostato su un testo, ad esempio categorie di pasti perché siamo nella schermata delle categorie, quindi

53
00:04:00,430 --> 00:04:03,970
sarebbe un titolo appropriato. Se lo salviamo,

54
00:04:03,970 --> 00:04:09,090
ora vedrai le categorie di pasti come titolo qui nell'intestazione.

55
00:04:09,120 --> 00:04:14,970
Ora puoi anche modellare l'intestazione qui con l'aiuto della proprietà style dell'intestazione, questo richiede un oggetto style

56
00:04:14,970 --> 00:04:21,200
in cui puoi generalmente impostare ciò che puoi impostare come stili anche nelle viste e lì, puoi aggiungere

57
00:04:21,310 --> 00:04:27,090
un colore di sfondo che è lo stile più comune che si applica in genere.

58
00:04:27,210 --> 00:04:32,610
Ora voglio impostare un colore qui e userò un approccio che ho già usato

59
00:04:32,670 --> 00:04:43,350
prima nel corso, aggiungerò una cartella delle costanti e lì, aggiungerò i colori. file js in cui esporterò quindi un oggetto Javascript in cui sono

60
00:04:43,440 --> 00:04:48,470
impostati tutti i colori che desidero utilizzare più volte nell'app.

61
00:04:48,600 --> 00:04:56,790
Lì, imposterò un colore primario per il quale ho preselezionato un codice esadecimale di # 4a148C ma ovviamente puoi provare diversi colori

62
00:04:56,790 --> 00:05:03,060
se vuoi e imposterò un colore accento o un colore secondario il cui codice esadecimale è #

63
00:05:03,270 --> 00:05:07,920
ff6f00 e questi sono solo i colori che ho scelto, come ho

64
00:05:07,920 --> 00:05:13,850
già detto, puoi ovviamente usarne di diversi. Nella schermata delle categorie, ora voglio usare

65
00:05:13,860 --> 00:05:21,030
i colori e per questo, devi importarli, importare i colori con una C maiuscola, che è solo una

66
00:05:21,030 --> 00:05:29,730
convenzione che sto usando per indicare che questa è una costante, da costanti / Colori , chiamato anche con la C maiuscola

67
00:05:29,730 --> 00:05:38,420
e quindi qui usiamo i colori. primaryColor per esempio. Se lo fai, vedrai che la tua intestazione ora

68
00:05:38,420 --> 00:05:43,730
ha questo colore viola scuro che ho scelto. Ciò rende il titolo un po 'difficile da leggere

69
00:05:44,030 --> 00:05:48,670
ma per fortuna, puoi anche modellare questo, non con lo stile dell'intestazione perché è solo la

70
00:05:48,720 --> 00:05:56,300
scatola dell'intestazione, per così dire, non il suo contenuto ma il titolo può essere disegnato con il colore della tinta dell'intestazione e ancora, i documenti ufficiali

71
00:05:56,450 --> 00:06:01,090
sono il luogo in cui puoi imparare tutto su queste opzioni disponibili, è così che ne

72
00:06:01,100 --> 00:06:02,380
so loro, è

73
00:06:02,390 --> 00:06:04,470
lì che vorresti leggere su di loro.

74
00:06:04,550 --> 00:06:10,820
Ora il colore della tinta dell'intestazione può sempre essere un colore, ad esempio il bianco qui che si adatta

75
00:06:10,820 --> 00:06:19,120
semplicemente al mio colore predefinito e ora vedi che è bianco. Ovviamente potresti anche voler un aspetto diverso per Android e iOS, potresti

76
00:06:19,120 --> 00:06:23,690
voler guardare dove questo sembra più iOS-ish, il che significa che non hai uno

77
00:06:23,740 --> 00:06:29,560
sfondo colorato ma solo un testo è colorato e puoi ottenerlo con il bene vecchia piattaforma API

78
00:06:29,560 --> 00:06:35,980
di cui hai appreso in precedenza nel corso. Possiamo usare l'API della piattaforma per cambiare dinamicamente

79
00:06:35,980 --> 00:06:42,490
i colori che utilizziamo qui in base alla piattaforma su cui è in esecuzione la nostra app.

80
00:06:42,490 --> 00:06:47,630
Quindi qui per il colore di sfondo, possiamo usare la piattaforma. os e vedere se quello è

81
00:06:47,640 --> 00:06:53,850
Android, nel qual caso voglio usare il colore primario, altrimenti in questa espressione ternaria, non userò alcun

82
00:06:53,920 --> 00:07:00,940
colore, quindi possiamo usare il bianco qui per esempio, un normale sfondo bianco o semplicemente impostare nessun colore in

83
00:07:00,940 --> 00:07:07,150
questo modo, otterrai il colore di sfondo predefinito. E per il colore della tinta, è

84
00:07:07,150 --> 00:07:10,810
lo stesso, controllo se il sistema operativo è Android in

85
00:07:10,810 --> 00:07:20,360
cui il colore del testo dovrebbe essere bianco, altrimenti lo imposterò su Colori. primaryColour e con questo, ora hai questo più iOS, quell'aspetto più

86
00:07:20,360 --> 00:07:27,530
tipico di iOS qui su iOS e hai l'aspetto Android predefinito che è più colorato su Android.

87
00:07:27,530 --> 00:07:31,100
Quindi è così che puoi impostare le opzioni

88
00:07:31,130 --> 00:07:39,170
di navigazione qui, ora per quanto riguarda questa schermata, dove andiamo ai nostri dettagli qui, ai pasti italiani

89
00:07:39,170 --> 00:07:45,500
o ai pasti facili e veloci? Sarebbe bello se potessimo vedere qui facile o veloce o italiano qui nell'intestazione

90
00:07:45,500 --> 00:07:46,400
in quel caso.

91
00:07:46,400 --> 00:07:51,230
Quindi questa è la prossima cosa di cui dovremmo occuparci e per questo, dobbiamo passare alcune

92
00:07:51,230 --> 00:07:55,940
informazioni da questa schermata a questa schermata. Quindi vedremo come funziona nel prossimo video.