Quindi voglio iniziare con una regolazione fine del font nelle mie schede qui, nell'intestazione e anche nel testo
qui in tutte le mie ricette. Voglio assicurarmi che ovunque, sto usando il carattere giusto, i
miei caratteri personalizzati e soprattutto qui, nell'intestazione, nelle schede, non lo stiamo ancora assicurando.
Certo, è relativamente
facile assicurarselo e iniziamo con l'intestazione. L'intestazione è generalmente in stile, come il colore di sfondo, con le nostre opzioni
di navigazione predefinite che abbiamo sempre impostato sul navigatore dello stack
a destra, le opzioni di navigazione predefinite qui ci consentono di dare uno stile all'intestazione e, ad esempio, di dare uno stile all'intestazione
in generale e aggiungi un colore di sfondo.
Ora è importante riconoscere che lo stile dell'intestazione ha come target solo la casella, lo sfondo per così
dire, quindi il contenitore in cui si trovano gli oggetti azione, il pulsante Indietro e questo titolo, il titolo stesso non può
essere preso di mira con lo
stile intestazione ma ovviamente ne abbiamo un'alternativa. Oltre allo stile di intestazione in cui possiamo modellare quel
contenitore di intestazione, abbiamo anche uno stile di titolo di intestazione e che non sorprende come target del componente di testo in
cui viene presentato il nostro titolo di intestazione e lì possiamo modellarlo come se potessimo stile elementi di testo in React Native, ad
esempio aggiungendo una famiglia di caratteri di open sans, sto usando di nuovo
la versione non in grassetto in modo da poter vedere rapidamente la differenza.
Questo chiaramente non è più in grassetto, immagino, è abbastanza chiaro da vedere, specialmente qui su iOS e ora se
lo imposto in grassetto, mi assicuro di usare questo giusto stile
sia su iOS che su Android. Ora, tra l'altro, per il testo qui di seguito,
possiamo anche sovrascrivere quel valore predefinito che è il carattere di sistema predefinito impostando lo stile del titolo del titolo dell'intestazione,
che
è un'impostazione separata che possiamo configurare qua e là, possiamo anche impostare la famiglia di
caratteri su diciamo open sans, non
la versione in grassetto, non voglio averlo in grassetto ma voglio averlo nel mio font e questo dovrebbe
essere open sans qui e usare il mio font. Su Android, ovviamente, questo non ha effetto perché
non abbiamo testo indietro. Quindi questa è una
cosa, questa è l'intestazione, per le schede è abbastanza simile. Qui possiamo andare al nostro navigatore a schede che stiamo creando,
come il navigatore a
schede
in basso materiale e questo ovviamente ha il nostro tabScreenConfig e quindi questo secondo oggetto in cui configuriamo il navigatore
stesso e come
sempre nella navigazione React, è il secondo oggetto in cui può controllare l'aspetto generale
delle cose specifiche del navigatore, come nel caso del navigatore a schede, il colore dell'icona della
scheda, il colore della barra, il colore della tinta o anche lo stile dell'etichetta e in effetti qui nelle opzioni della barra delle schede
per il navigatore scheda in basso, possiamo aggiungere uno stile di etichetta
e di nuovo, questo è indirizzato al componente
di testo che contiene la nostra etichetta, possiamo aggiungere una famiglia di
caratteri qui di OpenSans-Bold in modo che possiamo vedere chiaramente la differenza, se questo si ricarica, ora questo chiaramente
è un testo in grassetto. Questo in realtà non sembra troppo
male, quindi penso che possiamo mantenerlo,
ma ovviamente potresti anche impostarlo su open sans se vuoi una versione più sottile, ma
ora userei il nostro font. Ora per Android,
qui il navigatore della scheda inferiore materiale ha anche alcune opzioni di configurazione ma in realtà, non
ha uno stile di etichetta.
Quello che puoi fare lì invece è nelle schede separate che stai caricando, quindi sulle opzioni di navigazione delle schede
che stai caricando, dove stai anche impostando l'icona della barra delle schede e così via, lì possiamo aggiungere l'etichetta della barra delle schede qui dove
potremmo impostare un'etichetta come i pasti, più segni di spiegazione per sovrascrivere ciò che usiamo come etichetta ora sia su iOS
che
anche su Android e che può effettivamente essere una stringa come questa, ma puoi anche impostarla su
un componente React, su un componente di testo, e cioè lì, puoi impostare l'etichetta, i pasti ma ovviamente ora qui,
puoi aggiungere stile e aggiungere tutti gli stili che desideri.
Quindi un po 'di soluzione alternativa dal momento che non esiste un altro modo integrato di definire lo stile
per il navigatore delle schede inferiori dei materiali, ma meglio di niente.
Quindi qui, ora possiamo impostare la famiglia di caratteri su OpenSans-Bold e se lo facciamo, ovviamente dobbiamo anche assicurarci di
importare ora il componente di testo da React Native perché altrimenti non possiamo usarlo laggiù e ora
con quello , ovviamente lo otteniamo anche sul nostro iOS perché condividiamo la configurazione, lo sistemeremo in
un secondo, ma ora è così che possiamo impostare il nostro stile anche lì, ma
ovviamente ora abbiamo perso il colore che è il lato negativo dell'impostazione manuale qui e poiché abbiamo solo bisogno di questa soluzione alternativa,
per Android, per le schede di fondo materiale, la soluzione più semplice è utilizzare l'API della piattaforma e impostare questa etichetta della barra delle
schede su questo componente di testo solo se ' su Android perché solo allora abbiamo bisogno
di questa soluzione alternativa per impostare la famiglia di caratteri. Quindi controllerò se siamo su Android e, in tal
caso, restituirò un componente di testo qui, altrimenti restituirò solo i pasti di testo e quindi il vantaggio di restituire un testo
qui è semplicemente che l'altro nostro le impostazioni che impostano il colore della tinta, lo stile dell'etichetta e
così via verranno attivate e non verranno ignorate. Se impostiamo il nostro componente di testo, disabiliteremo tutte quelle funzionalità
predefinite, tutte queste funzionalità predefinite che sono integrate nel navigatore della scheda in basso.
Il problema con il navigatore della scheda inferiore materiale è che semplicemente non ha tutte
queste
funzionalità predefinite integrate, quindi lì dobbiamo scavalcare questo, ma dobbiamo farlo solo per Android d'altra parte.
Ora possiamo copiarlo e fare esattamente la stessa cosa ovviamente
per i preferiti, renderizzare i preferiti come testo su iOS e ovviamente anche nel componente di testo per Android e con quello, ora dovremmo avere uno
stile che funzioni e questo sembra buono . Su iOS lì, praticamente non abbiamo
cambiato nulla e su Android, ora abbiamo anche i nostri caratteri personalizzati.
Quindi è un po 'una soluzione alternativa che
è necessaria qui purtroppo quando si lavora con il navigatore delle schede in basso ma anche non troppo difficile da implementare e
con ciò, ci stiamo assicurando che stiamo usando il nostro font personalizzato ovunque nella navigazione relativa caratteristiche
della nostra app.