1
00:00:02,250 --> 00:00:07,650
Stiamo estraendo la nostra categoria qui nel nostro componente perché stiamo ottenendo il nostro parametro lì con l'aiuto

2
00:00:07,650 --> 00:00:09,130
di oggetti di navigazione.

3
00:00:09,150 --> 00:00:12,980
Ora, in realtà, voglio produrre il titolo nella mia intestazione.

4
00:00:13,050 --> 00:00:18,520
Ora hai imparato come configurare quell'intestazione con l'aiuto delle opzioni di navigazione, quindi sul componente della schermata

5
00:00:18,630 --> 00:00:25,170
dei pasti della categoria e quindi, questa è una funzione, quindi questo è un oggetto, possiamo aggiungere opzioni di navigazione e

6
00:00:25,530 --> 00:00:30,300
hai imparato che questo è un L'oggetto Javascript in cui è possibile impostare un

7
00:00:30,300 --> 00:00:35,670
titolo di intestazione e un titolo di intestazione ora dovrebbe essere il nome della mia categoria.

8
00:00:35,700 --> 00:00:43,910
Il problema qui è che qui è disponibile la categoria selezionata ma che è all'interno della funzione componente.

9
00:00:43,910 --> 00:00:49,670
Ciò ovviamente non è qualcosa a cui possiamo accedere qui perché ciò accade dopo la

10
00:00:49,670 --> 00:00:50,990
definizione della funzione.

11
00:00:51,350 --> 00:00:55,150
Quindi non abbiamo accesso alla categoria che abbiamo identificato lì,

12
00:00:55,220 --> 00:00:56,920
questo è un problema.

13
00:00:56,930 --> 00:01:04,390
La cosa buona è che le opzioni di navigazione possono essere un oggetto se hai valori di configurazione statici codificati ma

14
00:01:05,000 --> 00:01:11,990
può anche essere una funzione se hai bisogno di una configurazione dinamica che dipende dalla modifica dei dati e, naturalmente,

15
00:01:12,020 --> 00:01:17,300
i dati da cui dipendiamo qui stanno cambiando perché noi ' riutilizzando la stessa

16
00:01:17,300 --> 00:01:22,820
schermata per categorie diverse e, pertanto, l'ID e il titolo della categoria cambiano ogni volta

17
00:01:22,820 --> 00:01:26,140
che utilizziamo quella schermata. Una volta lo stiamo usando per

18
00:01:26,140 --> 00:01:32,360
la categoria italiana, la prossima volta lo stiamo usando per la categoria esotica. Questa funzione che puoi anche usare, ovviamente è

19
00:01:32,360 --> 00:01:34,700
supportata dalla navigazione React e

20
00:01:34,700 --> 00:01:40,220
se questa è una funzione, ciò che stai passando alle opzioni di navigazione, React

21
00:01:40,220 --> 00:01:48,740
navigation lo chiamerà per te e passerà alcuni dati di navigazione, quindi passare un oggetto con alcuni dati che dovrebbero esserti utili,

22
00:01:48,740 --> 00:01:54,800
daremo un'occhiata a cosa c'è dentro in un secondo perché possiamo semplicemente registrare questi dati di

23
00:01:54,800 --> 00:01:55,850
navigazione qui.

24
00:01:55,970 --> 00:01:57,610
Cominciamo con quello, ora

25
00:01:57,710 --> 00:02:01,210
andiamo a questa pagina e vediamo cosa c'è dentro.

26
00:02:01,310 --> 00:02:05,850
Se espanderlo qui, questo è il registro che ho e vedi che

27
00:02:05,850 --> 00:02:14,570
abbiamo un altro oggetto di navigazione nei dati di navigazione. Lì abbiamo azioni, abbiamo navigato pop, push,

28
00:02:14,580 --> 00:02:15,390
quindi

29
00:02:15,390 --> 00:02:20,010
sostanzialmente quello che sapevamo. Abbiamo anche getParam lì

30
00:02:20,010 --> 00:02:28,050
e questo dovrebbe essere utile perché questo ci permetterà di estrarre i dati qui all'interno delle nostre opzioni

31
00:02:28,110 --> 00:02:36,880
di navigazione alla fine, il che dovrebbe essere super utile. Quindi alla fine otteniamo lo stesso puntello di navigazione che otteniamo anche sui nostri componenti.

32
00:02:37,040 --> 00:02:48,110
Quindi qui, ora possiamo usare navigationData. navigazione. getParam per ottenere il mio ID categoria, esattamente

33
00:02:48,110 --> 00:02:54,660
quello che abbiamo fatto nel componente. Quindi possiamo ripetere il codice che avevamo in un componente

34
00:02:54,660 --> 00:03:02,020
e ottenere la categoria selezionata, non solo nel componente ma ora anche in questa funzione che usiamo per impostare le nostre opzioni di navigazione.

35
00:03:02,040 --> 00:03:08,130
Quindi ora qui, abbiamo anche accesso alla categoria selezionata e ora, opzioni di navigazione, questa funzione, se

36
00:03:08,220 --> 00:03:13,460
è una funzione, dovrebbe ovviamente restituire un oggetto con le tue opzioni di navigazione.

37
00:03:13,470 --> 00:03:19,860
Quindi, ciò che in precedenza abbiamo impostato direttamente come opzioni di navigazione quando avevamo solo valori codificati ora

38
00:03:19,860 --> 00:03:20,550
deve

39
00:03:20,610 --> 00:03:26,950
essere restituito, ma ora è possibile utilizzare qui questi dati derivati dinamicamente o le informazioni derivate dinamicamente.

40
00:03:26,970 --> 00:03:33,600
Quindi ora possiamo ancora impostare un titolo di intestazione qui e il titolo di intestazione ora può essere

41
00:03:33,720 --> 00:03:35,450
selezionato Categoria. titolo.

42
00:03:35,510 --> 00:03:41,300
Questo è il modo in cui possiamo ricavarlo in modo dinamico e quindi ora se

43
00:03:41,300 --> 00:03:47,420
torni indietro, vedi l'italiano qui, vedi veloce e facile qui, vedi il tedesco qui e questo funziona.

44
00:03:47,420 --> 00:03:55,280
Tieni presente che, per impostazione predefinita, ricevi anche un testo del pulsante Indietro che è il titolo delle schermate precedenti, questa è

45
00:03:55,280 --> 00:04:01,130
un'altra funzione predefinita che ti dà React navigation. Vediamo di nuovo le categorie dei pasti qui

46
00:04:01,130 --> 00:04:05,720
perché veniamo dalle categorie dei pasti. Solo in modo rapido e semplice in

47
00:04:05,720 --> 00:04:13,010
cui questo sarebbe troppo lungo accanto a questo titolo un po 'più lungo, ripristina e il valore predefinito torna indietro, che è un buon

48
00:04:13,010 --> 00:04:19,400
comportamento predefinito che potresti ignorare ma di cui sono contento. Su Android, non abbiamo un back text ma ovviamente

49
00:04:19,400 --> 00:04:25,340
abbiamo un pulsante back e lì, anche l'intestazione è popolata correttamente per le schermate che vengono caricate.

50
00:04:26,240 --> 00:04:32,030
Ecco come possiamo anche ottenere dinamicamente i nostri dati qui nelle opzioni di navigazione. Un problema che potresti notare, sebbene sia più

51
00:04:32,030 --> 00:04:37,430
visibile qui su Android, è che l'intestazione nella nuova schermata che stiamo caricando non ha lo stesso

52
00:04:37,700 --> 00:04:44,450
stile della nostra intestazione qui, non ha il colore di sfondo. Ora, ovviamente, questo è facilmente risolto perché sulle

53
00:04:44,480 --> 00:04:51,620
opzioni di navigazione della categoria pasti, possiamo semplicemente portare lo stile dell'intestazione e il colore della tinta dell'intestazione

54
00:04:51,620 --> 00:04:58,250
che abbiamo impostato qui anche sull'altro schermo. Quindi possiamo copiarlo qui e questo

55
00:04:58,250 --> 00:05:06,200
significa solo che dobbiamo importare l'API della piattaforma e, naturalmente, il nostro colore costante, quindi importare i colori

56
00:05:06,550 --> 00:05:18,730
da costanti / colori come questo e quando lo facciamo, vedremo che se andiamo lì , ora abbiamo lo stesso stile di intestazione per questa nuova pagina,

57
00:05:18,730 --> 00:05:25,570
che è ovviamente ciò che in genere desideri. Ciò che non si desidera in genere, tuttavia, è

58
00:05:25,600 --> 00:05:31,300
che è necessario copiare la stessa configurazione su tutte le schermate perché in questa app non

59
00:05:31,300 --> 00:05:36,070
abbiamo così tante schermate, possiamo certamente farlo ma in app più grandi dove

60
00:05:36,070 --> 00:05:42,520
hai più schermate, che sarebbe super fastidioso e super ingombrante, quindi sicuramente non è il modo di andarci.

61
00:05:42,520 --> 00:05:44,740
Quindi diamo un'occhiata a un'alternativa nella prossima lezione.