Con ciò, abbiamo aggiunto le schede e sì,
sui preferiti, non stiamo
ancora facendo nulla,
è qualcosa che seguiremo ma abbiamo almeno schede. Prima di lavorare sui preferiti, lavoriamo un po
'di più sulle schede perché in questo momento, abbiamo schede su Android che non sembrano proprio come
ci aspetteremmo che le schede Android sembrino, assomigliano più alle schede iOS se mi chiedi .
Certo che funziona e puoi mantenerlo se questo è
lo stile che desideri, niente di sbagliato in questo, ma sarebbe meglio avere un aspetto più specifico di
Android forse e per questo, abbiamo un navigatore separato che possiamo creare, anche se dobbiamo installare un pacchetto aggiuntivo per questo
prima di tutto, quindi facciamolo.
Permettetemi di uscire da quel server qui ed eseguire npm
install --save e ora questo è reagire-navigazione-materiale-schede-in basso, a proposito c'è anche reagire-navigazione-materiale-schede-in-alto, non mi immergerò in quello questo
corso qui ma in allegato trovi anche un link dove puoi saperne di
più su quel navigatore alternativo. Useremo il navigatore delle schede
in basso del materiale qui e installeremo questo pacchetto, ecco come iniziamo.
Quindi aspettiamo che l'installazione finisca e, successivamente, installiamo un altro
pacchetto di cui avremo bisogno anche con npm install --save e che è reagente-nativo-carta. Quindi installiamo anche questo e una volta terminata l'installazione, riavviamo il server
expo con
npm start perché ora
abbiamo installato pacchetti che ci aiutano a rendere
un navigatore a schede alternativo ed è per fortuna davvero semplice
da usare e ha praticamente lo stesso o molto opzioni di configurazione simili
a quelle del navigatore in basso, specialmente quando si tratta
di impostare icone e così via. In allegato, trovi tutti i documenti per
questo navigatore
alternativo e per quello ancora un altro navigatore alternativo che ho citato e usiamolo importando da questo pacchetto di navigatore
di recente-reazione-materiale-fondo-schede appena installato qui e da lì possiamo importare il creare funzione di navigazione della scheda
inferiore materiale qui.
Ora assicurati di avere anche importazioni dalla piattaforma perché ora ne avremo bisogno
perché voglio usare questo navigatore al posto del navigatore
Crea scheda inferiore solo se siamo su Android. Quindi qui possiamo verificare se la piattaforma. os è uguale ad Android e in quel
caso, voglio usare quella nuova funzione di navigazione nella scheda inferiore del materiale che ho
appena importato,
altrimenti dopo i due punti, useremo il navigatore della scheda inferiore che abbiamo impostato nella lezione precedente.
Quindi questo ovviamente ci lascia con una domanda: come funziona il navigatore della scheda inferiore materiale? Come lo configuriamo?
E la buona notizia qui è, generalmente funziona come il navigatore in basso.
Ci sono alcuni dettagli che puoi configurare sul navigatore delle schede
stesso, quindi ad esempio quale colore assumere, quando e così via differisce
ma riguardo al modo in cui imposti le tue schede e abbini le schermate e le icone
delle impostazioni, è esattamente lo stesso e quindi noi puoi effettivamente prendere l'intera configurazione dello schermo qui,
tagliarlo da qui e archiviarlo in una costante separata qui che chiamerò tabScreenConfig, puoi nominarlo
come vuoi perché
può essere riutilizzato e ora usa tabScreenConfig come primo argomento sia nel navigatore della scheda inferiore e nel
navigatore della scheda inferiore materiale, proprio come questo e questo ci lascia solo con un secondo argomento alternativo che
passiamo al navigatore della scheda inferiore materiale e solo al navigatore della scheda inferiore.
Questo secondo argomento che passiamo, questo oggetto che passiamo come secondo argomento, come hai appreso, ci consente di configurare
il navigatore delle schede stesso, ad esempio impostare opzioni della barra delle schede come il colore
di tinta attivo e che differisce un po 'perché per il navigatore della scheda inferiore del materiale , non impostiamo le opzioni della barra delle schede per
configurare il nostro colore di tinta attivo,
invece abbiamo direttamente un colore di tinta attivo qui in questo oggetto stesso, nel navigatore della scheda inferiore, lo avevamo in
un oggetto nidificato, nelle opzioni della barra di schede
, non l'abbiamo qui.
Invece qui, impostiamo solo il colore di tinta attivo come quello sui colori di accento e ci
sono anche altre impostazioni, ad esempio puoi impostare lo spostamento su vero e mostrerò cosa
fa questo e
cosa fa falso in un secondo e con quello, per ora è tutto. Se ora lo salviamo, questo ricostruirà il nostro progetto e lo ricaricherà sullo
schermo e abbiamo le stesse schede di prima su iOS,
che
non sono cambiate ma
su Android, ora abbiamo quel navigatore di schede con
aspetto più materiale qui dove possiamo ora cambia anche in questo modo ed è
questo effetto di spostamento che vedi qui, che le schede crescono, che l'etichetta esiste solo sulla scheda che
è attiva e se
imposti lo spostamento su false qui a proposito, semplicemente non hai questo effetto, quindi hai
sempre le tue etichette anche su Android.
Quindi ora è un aspetto che assomiglia un po 'di
più ad Android, ed è quindi un aspetto che vorrei avere qui e puoi farlo ancora di più.
Diciamo che vogliamo cambiare l'intero colore di sfondo della barra delle
schede qui a
seconda della scheda selezionata e avere un buon effetto a catena che cambia questo lungo il percorso.
Per questo, possiamo andare alla nostra configurazione dello schermo e lì alle opzioni di navigazione e lì, abbiamo l'icona
della barra delle schede.
Possiamo anche impostare un colore della barra delle schede qui quando questa scheda è
selezionata per così dire e, ad esempio, impostarla sul colore primario dei colori e ora importante, questo ha effetto solo se si imposta lo
spostamento su true, altrimenti questo puntello di colore della barra delle schede che sto impostando qui non avrà alcun effetto perché solo
l'effetto di spostamento supporta questo e quello che ora avremo, l'effetto che ora avremo è che se lo salvo,
ottengo lo stesso aspetto su iOS perché c'è la barra delle schede il colore non ha alcun effetto
ma ora vedi, abbiamo davvero il nostro colore primario come sfondo se i pasti
sono selezionati, se selezioniamo i preferiti, che cambiano con l'altro colore.
Ora questo cambio di rotta non sembra così bello e quindi possiamo semplicemente cambiarlo dando anche al nostro schermo
dei preferiti il suo colore della barra delle schede.
Quindi potremmo dire nelle opzioni di navigazione della schermata dei preferiti accanto all'icona della barra delle schede, impostiamo il
colore della barra delle schede lì sul colore dell'accento e quello che ora avremo è una barra delle schede di colore diverso che passa dal nostro colore
primario per i pasti qui a questo colore di accento per i preferiti con questo piacevole effetto a catena e naturalmente il rovescio della medaglia
è che non vediamo l'icona perché il colore di accento per il colore della barra delle schede non è una
buona scelta
se il nostro colore di tinta è anche un colore di accento.
Quindi, se utilizziamo questo effetto, potremmo voler usare il bianco qui come un colore di tinta che possiamo
sempre vedere sia sul colore principale che su quello di accento e quindi qui per il colore di tinta attivo, potremmo voler usare il
bianco invece del nostro accento colore perché il bianco funzionerà per entrambe le schede, quindi non importa se la barra
delle schede viene quindi colorata nel colore primario, quel viola scuro o nel colore accento, quell'arancione e quindi ora vedete
che abbiamo questo effetto qui e questa
piacevole increspatura cambia in l'altra scheda qui per i preferiti. E penso che sia un cambiamento piuttosto dolce e
facile da implementare che rende questo aspetto fantastico su Android e sicuramente ci dà un aspetto simile ad
Android più caratteristico pur mantenendo l'aspetto iOS predefinito che ti aspetteresti su quella piattaforma, è davvero facile da
implementare come te Posso dire.
Ora una breve nota a margine, se non vuoi usare questo effetto di
spostamento che voglio usare qui ma se non vuoi usarlo, ovviamente potresti notare che il colore
di sfondo delle tue schede su Android è non è il tuo colore principale ma invece è un po 'più chiaro di viola, viola-bluastro.
Ora, in genere, potresti voler cambiare anche questo ovviamente e
come vedi, il colore della barra delle schede semplicemente non ha
alcun effetto, funziona solo con lo spostamento.
Ora se vuoi cambiare il colore di sfondo per l'intera barra delle schede nel caso senza spostamento, tutto ciò
che devi fare è qui sulla configurazione del navigatore delle schede stesso perché influisce ora sull'intera barra delle schede, puoi impostare una proprietà
di stile
barra e che è semplicemente un oggetto di stile in cui è possibile ad esempio impostare il colore
di sfondo su colori primari, come questo e questo cambia semplicemente il colore di sfondo della
barra di navigazione per la nostra barra inferiore Android qui.
Quindi è così che puoi cambiare questo se non vuoi usare qui il modello di spostamento,
l'aspetto del cambio.
Attiverò di nuovo lo spostamento, tuttavia,
lo imposteremo di nuovo perché mi piace molto questa barra delle schede di colore diverso, penso
che sia davvero bello con quell'effetto a catena che cambia il colore ed è così facile implementare
diversi barre delle schede.
Ancora una volta, ci sono un sacco di opzioni di configurazione sia per la barra delle schede stessa che per le
opzioni di navigazione delle schermate che hai all'interno della barra delle schede e quindi trovi i documenti ufficiali allegati
in cui puoi immergerti in ogni singola opzione ed esplorare e giocare con loro.