Quindi abbiamo dato uno sguardo dettagliato a dimensioni, orientamenti e rendering di stili e layout diversi in base alla
larghezza e altezza disponibili e anche a come reagire alle variazioni di larghezza e altezza quando si
ruota il dispositivo, ad esempio, cose molto importanti.
Vediamo ora come è possibile eseguire il rendering di stili o layout diversi o di ciò che si desidera
in base alla piattaforma su cui si sta eseguendo.
Al momento abbiamo sostanzialmente un'app identica su iOS e Android con un'eccezione e questo è il
nostro pulsante qui.
I pulsanti sembrano diversi perché il componente pulsante che stiamo utilizzando è un componente inserito in React Native
ed è uno dei rarissimi, in realtà l'unico componente offerto da React Native che si regola automaticamente in base alla piattaforma su cui è
in esecuzione la tua app, nessun altro componente lo fa
davvero, ma ovviamente puoi scrivere codice per adattare i tuoi stili, la logica del layout, qualunque cosa tu voglia in base
alla piattaforma su cui stai girando. Per vedere un esempio, andiamo al
nostro componente header e lì, lavoriamo sul modo in
cui presentiamo questo header. Su Android potremmo avere
questo colore di sfondo e quindi del testo davanti, su iOS potremmo voler
avere un colore di sfondo bianco e avere solo un bordo sottile nella parte inferiore e invece
avere il testo nel nostro colore primario,
che sarebbe un aspetto iOS più tipico dopo tutto.
Ora per scoprire su quale piattaforma stai eseguendo, React Native ti ha coperto, ha l'oggetto piattaforma in cui
le dimensioni ti aiutano a scoprire le dimensioni del dispositivo su cui stai correndo, la
piattaforma ti aiuta a scoprire la piattaforma del dispositivo stai correndo.
Quindi ora qui negli stili che stavi creando,
potremmo rendere un colore di sfondo diverso basato su quello.
Possiamo usare la piattaforma e ora lì, hai un paio di proprietà
che puoi usare e per esempio hai la proprietà del sistema operativo e il sistema operativo è fondamentalmente il sistema operativo
ed è
uno dei valori che vedi qui, soprattutto iOS o Android.
Quindi qui possiamo verificare se questo è uguale a diciamo Android e in questo caso, ho impostato il
mio colore di sfondo
su colori primari ma se non è Android e quindi se è iOS, ho impostato questo per dire bianco.
Ora, se lo facciamo e lo salviamo, vediamo un'intestazione bianca qui sul dispositivo iOS e un'intestazione colorata
sul dispositivo Android.
Ora, ovviamente, non è necessario impostare alcun listener sulla piattaforma e non offre tale funzionalità
perché la piattaforma non può cambiare mentre l'app è in esecuzione, ovviamente
lo stesso sistema operativo.
Ora finiamo lo styling per iOS.
Ho detto che voglio avere un bordo sottile nella parte inferiore, quindi possiamo aggiungere un
colore inferiore del bordo e controllare la piattaforma e se il sistema operativo è uguale a iOS, quindi voglio
impostare il colore inferiore del bordo per dire questo grigiastro colore, altrimenti lo invierò
al bianco o al trasparente in realtà in modo che non possiamo vederlo su Android e aggiungere un bordo inferiore
con di diciamo e lì facciamo anche quel controllo per iOS di diciamo un pixel su iOS e zero su Android.
Quindi ora non dovremmo vedere nulla su Android ma abbiamo quel bordo sottile qui su iOS.
Ultimo ma non meno importante, coloriamo il testo andando al testo del titolo qui e il testo del titolo si fonde effettivamente in tutti gli stili che abbiamo impostato
sul puntello di stile, quindi qui sul testo del
titolo, possiamo aggiungere un puntello di stile e puntare agli stili. titolo qui o come si desidera
nominarlo e aggiungere un oggetto stile titolo qui nel nostro foglio di stile in cui
impostiamo il colore che è il colore del testo basato anche sulla piattaforma.
Se si tratta di iOS, supponiamo di impostarlo su colori. primario e altrimenti, impostiamolo su bianco, prima era
nero,
ora impostiamolo su bianco.
Ora abbiamo un titolo bianco qui su Android ma un titolo colorato qui su iOS e questo è quanto è facile impostare diversi stili
in base alla piattaforma su cui si sta eseguendo, come si
può vedere.