Nella schermata delle categorie, vogliamo assicurarci che il nostro articolo possa essere
toccato lì, quindi importerò touchable e importerò opacità tangibile qui per avere un leggero effetto di opacità
ma ovviamente dipende
da te quale modello o
quale componente usi lì, dovrebbe esserci un componente tangibile attraverso il quale avvolgi il tuo articolo qui
e ora
sull'opacità tangibile, aggiungerò suPress in modo che possiamo fare qualcosa quando questo viene premuto.
Cosa vogliamo fare?
Vogliamo andare alla schermata dei pasti della categoria che è una specie di pagina dei dettagli per una categoria scelta per mostrare tutte
le ricette per quella categoria, non
abbiamo ancora ricette ma voglio ancora andare alla pagina.
Quindi quindi qui, dobbiamo attivare un'azione di navigazione e in precedenza lo abbiamo fatto con la navigazione di oggetti
di scena, giusto?
Il problema è che non abbiamo oggetti di scena disponibili qui perché siamo all'interno della funzione di elemento della griglia di
rendering che è al di fuori del nostro componente.
Ora possiamo semplicemente spostare questo all'interno del nostro componente per risolvere questo problema.
Se creiamo quella funzione lì dentro, allora abbiamo accesso ai puntelli perché ora siamo all'interno della nostra funzione
componente e ora saremo in grado di chiamare navigare qui. Possiamo chiamare la navigazione e voglio andare al nome di
una rotta e, naturalmente, il nome della rotta a cui voglio andare può essere trovato nel nostro navigatore per i
pasti di categoria, perché vogliamo caricare tutti i pasti per la categoria scelta.
Quindi andiamo alla categoria pasti qui e se lo aggiungiamo e lo salviamo, vediamo ora che il nostro stile
è un po 'rotto, lo risolverò in un secondo ma la navigazione
funziona, abbiamo anche questo effetto di opacità, quindi funziona . Ora fissare lo stile è facile, l'abbiamo appena perso perché
ho avvolto l'opacità tangibile attorno alla
mia vista, dobbiamo solo aggiungere questo stile qui che aggiunge il margine attorno al nostro articolo e così via
all'opacità toccabile invece di quella vista qui e con quello, abbiamo recuperato quello stile e ora funziona come dovrebbe.
La domanda più interessante è: come possiamo effettivamente impostare il titolo dell'intestazione? Ora, per questo, abbiamo un paio
di
opzioni, diamo un'occhiata all'opzione numero uno. Su ogni componente di React che caricherai
come schermata, il che significa che cosa mappi a tale nome di schermata, ad esempio nel navigatore dello stack, puoi aggiungere una proprietà.
Ora tieni presente che lo schermo delle categorie è ovviamente un componente React ma tecnicamente è una funzione
Javascript, giusto?
È una funzione che riceve l'argomento props e quindi esegue questo corpo che restituisce jsx
e quindi React è in grado di usarlo come componente
ma tecnicamente è una funzione Javascript.
Ora le funzioni Javascript sono solo oggetti, ovvero
Javascript, le
funzioni sono oggetti e sugli oggetti, possiamo aggiungere proprietà. Quindi la schermata delle categorie è solo un oggetto
Javascript,
quindi possiamo aggiungere una proprietà dopo averla creata.
Quindi qui, dopo aver definito la funzione dello schermo delle nostre categorie e quindi questo oggetto, possiamo accedervi e possiamo aggiungere una
proprietà con la notazione punto, ecco come funziona Javascript, puoi semplicemente aggiungere una
tale proprietà.
Ora puoi aggiungere qui una proprietà speciale per la quale verrà cercata la navigazione React e questa è la proprietà
delle opzioni di navigazione.
Non devi aggiungerlo e questo non sarà un problema se
non lo fai, non l'abbiamo fatto finora ma puoi aggiungerlo, se lo aggiungi, sarà rispettato da React navigazione.
Ora ci sono un sacco di opzioni che puoi impostare lì e un elenco completo può ovviamente
essere trovato nei documenti ufficiali.
Nella forma più semplice, puoi semplicemente assegnare un oggetto Javascript qui con quel
gruppo di opzioni che ora puoi impostare in questo oggetto e l'opzione che mi interessa qui è il
titolo dell'intestazione, che può essere semplicemente impostato su un testo, ad esempio categorie di pasti perché siamo nella schermata delle categorie, quindi
sarebbe un titolo appropriato. Se lo salviamo,
ora vedrai le categorie di pasti come titolo qui nell'intestazione.
Ora puoi anche modellare l'intestazione qui con l'aiuto della proprietà style dell'intestazione, questo richiede un oggetto style
in cui puoi generalmente impostare ciò che puoi impostare come stili anche nelle viste e lì, puoi aggiungere
un colore di sfondo che è lo stile più comune che si applica in genere.
Ora voglio impostare un colore qui e userò un approccio che ho già usato
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
impostati tutti i colori che desidero utilizzare più volte nell'app.
Lì, imposterò un colore primario per il quale ho preselezionato un codice esadecimale di # 4a148C ma ovviamente puoi provare diversi colori
se vuoi e imposterò un colore accento o un colore secondario il cui codice esadecimale è #
ff6f00 e questi sono solo i colori che ho scelto, come ho
già detto, puoi ovviamente usarne di diversi. Nella schermata delle categorie, ora voglio usare
i colori e per questo, devi importarli, importare i colori con una C maiuscola, che è solo una
convenzione che sto usando per indicare che questa è una costante, da costanti / Colori , chiamato anche con la C maiuscola
e quindi qui usiamo i colori. primaryColor per esempio. Se lo fai, vedrai che la tua intestazione ora
ha questo colore viola scuro che ho scelto. Ciò rende il titolo un po 'difficile da leggere
ma per fortuna, puoi anche modellare questo, non con lo stile dell'intestazione perché è solo la
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
sono il luogo in cui puoi imparare tutto su queste opzioni disponibili, è così che ne
so loro, è
lì che vorresti leggere su di loro.
Ora il colore della tinta dell'intestazione può sempre essere un colore, ad esempio il bianco qui che si adatta
semplicemente al mio colore predefinito e ora vedi che è bianco. Ovviamente potresti anche voler un aspetto diverso per Android e iOS, potresti
voler guardare dove questo sembra più iOS-ish, il che significa che non hai uno
sfondo colorato ma solo un testo è colorato e puoi ottenerlo con il bene vecchia piattaforma API
di cui hai appreso in precedenza nel corso. Possiamo usare l'API della piattaforma per cambiare dinamicamente
i colori che utilizziamo qui in base alla piattaforma su cui è in esecuzione la nostra app.
Quindi qui per il colore di sfondo, possiamo usare la piattaforma. os e vedere se quello è
Android, nel qual caso voglio usare il colore primario, altrimenti in questa espressione ternaria, non userò alcun
colore, quindi possiamo usare il bianco qui per esempio, un normale sfondo bianco o semplicemente impostare nessun colore in
questo modo, otterrai il colore di sfondo predefinito. E per il colore della tinta, è
lo stesso, controllo se il sistema operativo è Android in
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ù
tipico di iOS qui su iOS e hai l'aspetto Android predefinito che è più colorato su Android.
Quindi è così che puoi impostare le opzioni
di navigazione qui, ora per quanto riguarda questa schermata, dove andiamo ai nostri dettagli qui, ai pasti italiani
o ai pasti facili e veloci? Sarebbe bello se potessimo vedere qui facile o veloce o italiano qui nell'intestazione
in quel caso.
Quindi questa è la prossima cosa di cui dovremmo occuparci e per questo, dobbiamo passare alcune
informazioni da questa schermata a questa schermata. Quindi vedremo come funziona nel prossimo video.