Stiamo estraendo la nostra categoria qui nel nostro componente perché stiamo ottenendo il nostro parametro lì con l'aiuto
di oggetti di navigazione.
Ora, in realtà, voglio produrre il titolo nella mia intestazione.
Ora hai imparato come configurare quell'intestazione con l'aiuto delle opzioni di navigazione, quindi sul componente della schermata
dei pasti della categoria e quindi, questa è una funzione, quindi questo è un oggetto, possiamo aggiungere opzioni di navigazione e
hai imparato che questo è un L'oggetto Javascript in cui è possibile impostare un
titolo di intestazione e un titolo di intestazione ora dovrebbe essere il nome della mia categoria.
Il problema qui è che qui è disponibile la categoria selezionata ma che è all'interno della funzione componente.
Ciò ovviamente non è qualcosa a cui possiamo accedere qui perché ciò accade dopo la
definizione della funzione.
Quindi non abbiamo accesso alla categoria che abbiamo identificato lì,
questo è un problema.
La cosa buona è che le opzioni di navigazione possono essere un oggetto se hai valori di configurazione statici codificati ma
può anche essere una funzione se hai bisogno di una configurazione dinamica che dipende dalla modifica dei dati e, naturalmente,
i dati da cui dipendiamo qui stanno cambiando perché noi ' riutilizzando la stessa
schermata per categorie diverse e, pertanto, l'ID e il titolo della categoria cambiano ogni volta
che utilizziamo quella schermata. Una volta lo stiamo usando per
la categoria italiana, la prossima volta lo stiamo usando per la categoria esotica. Questa funzione che puoi anche usare, ovviamente è
supportata dalla navigazione React e
se questa è una funzione, ciò che stai passando alle opzioni di navigazione, React
navigation lo chiamerà per te e passerà alcuni dati di navigazione, quindi passare un oggetto con alcuni dati che dovrebbero esserti utili,
daremo un'occhiata a cosa c'è dentro in un secondo perché possiamo semplicemente registrare questi dati di
navigazione qui.
Cominciamo con quello, ora
andiamo a questa pagina e vediamo cosa c'è dentro.
Se espanderlo qui, questo è il registro che ho e vedi che
abbiamo un altro oggetto di navigazione nei dati di navigazione. Lì abbiamo azioni, abbiamo navigato pop, push,
quindi
sostanzialmente quello che sapevamo. Abbiamo anche getParam lì
e questo dovrebbe essere utile perché questo ci permetterà di estrarre i dati qui all'interno delle nostre opzioni
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.
Quindi qui, ora possiamo usare navigationData. navigazione. getParam per ottenere il mio ID categoria, esattamente
quello che abbiamo fatto nel componente. Quindi possiamo ripetere il codice che avevamo in un componente
e ottenere la categoria selezionata, non solo nel componente ma ora anche in questa funzione che usiamo per impostare le nostre opzioni di navigazione.
Quindi ora qui, abbiamo anche accesso alla categoria selezionata e ora, opzioni di navigazione, questa funzione, se
è una funzione, dovrebbe ovviamente restituire un oggetto con le tue opzioni di navigazione.
Quindi, ciò che in precedenza abbiamo impostato direttamente come opzioni di navigazione quando avevamo solo valori codificati ora
deve
essere restituito, ma ora è possibile utilizzare qui questi dati derivati dinamicamente o le informazioni derivate dinamicamente.
Quindi ora possiamo ancora impostare un titolo di intestazione qui e il titolo di intestazione ora può essere
selezionato Categoria. titolo.
Questo è il modo in cui possiamo ricavarlo in modo dinamico e quindi ora se
torni indietro, vedi l'italiano qui, vedi veloce e facile qui, vedi il tedesco qui e questo funziona.
Tieni presente che, per impostazione predefinita, ricevi anche un testo del pulsante Indietro che è il titolo delle schermate precedenti, questa è
un'altra funzione predefinita che ti dà React navigation. Vediamo di nuovo le categorie dei pasti qui
perché veniamo dalle categorie dei pasti. Solo in modo rapido e semplice in
cui questo sarebbe troppo lungo accanto a questo titolo un po 'più lungo, ripristina e il valore predefinito torna indietro, che è un buon
comportamento predefinito che potresti ignorare ma di cui sono contento. Su Android, non abbiamo un back text ma ovviamente
abbiamo un pulsante back e lì, anche l'intestazione è popolata correttamente per le schermate che vengono caricate.
Ecco come possiamo anche ottenere dinamicamente i nostri dati qui nelle opzioni di navigazione. Un problema che potresti notare, sebbene sia più
visibile qui su Android, è che l'intestazione nella nuova schermata che stiamo caricando non ha lo stesso
stile della nostra intestazione qui, non ha il colore di sfondo. Ora, ovviamente, questo è facilmente risolto perché sulle
opzioni di navigazione della categoria pasti, possiamo semplicemente portare lo stile dell'intestazione e il colore della tinta dell'intestazione
che abbiamo impostato qui anche sull'altro schermo. Quindi possiamo copiarlo qui e questo
significa solo che dobbiamo importare l'API della piattaforma e, naturalmente, il nostro colore costante, quindi importare i colori
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,
che è ovviamente ciò che in genere desideri. Ciò che non si desidera in genere, tuttavia, è
che è necessario copiare la stessa configurazione su tutte le schermate perché in questa app non
abbiamo così tante schermate, possiamo certamente farlo ma in app più grandi dove
hai più schermate, che sarebbe super fastidioso e super ingombrante, quindi sicuramente non è il modo di andarci.
Quindi diamo un'occhiata a un'alternativa nella prossima lezione.