Ora a volte può essere ingombrante aggiungere un sacco di
tali controlli e qui abbiamo già tre controlli nell'intestazione,
per esempio, sicuramente qualcosa che possiamo aggiungere ma forse non ottimale.
Invece di mantenere più puliti i nostri oggetti di stile, potremmo impostare qui un'intestazione di base,
ad esempio header base e quindi aggiungere headerIOS e headerAndroid e ora ciò che facciamo è prendere tutti questi stili che cambiano in base alla piattaforma
dallo stile di base, aggiungili
qui a headerIOS e headerAndroid e su headerIOS, manteniamo
solo l'aspetto iOS qui, così bianco, quindi questo colore per il bordo
in basso e una larghezza di pixel di uno per quel bordo e qui su
Android, rimuoviamo questo controllo e manteniamo il colore primario come colore di sfondo e, d'altra parte, ci
liberiamo del nostro bordo usando questi valori o rimuovendolo completamente e non impostandolo
affatto.
Ora dobbiamo solo assicurarci di aggiungere headerIOS o headerAndroid e per questo, possiamo andare qui e impostare
il nostro oggetto stili dove uniamo ora tutti gli stili base dell'intestazione, quindi questi
sono sempre impostati ma ora anche noi può fondersi nel risultato della selezione della piattaforma che ora è un metodo che prende un
oggetto in cui dobbiamo specificare una chiave iOS e puntare al valore o, in questo caso, l'oggetto che vogliamo usare
se siamo su iOS che sono stili. headerIOS e aggiungere una chiave Android e puntare agli
stili che headerAndroid e con ciò stiamo
dicendo a React Native si prega di unire le proprietà del valore, in questo caso, un oggetto
che stiamo selezionando per iOS e per Android.
Quindi dovrai sempre passare un oggetto alla selezione della piattaforma e quindi hai valori diversi per iOS e Android
e il valore qui potrebbe anche essere un numero, semplicemente non funzionerebbe qui perché qui ci
aspettiamo un oggetto in modo che possiamo estrarre tutte le coppie di valori di proprietà e passarle al nostro stile circostante.
Quindi qui un numero non ha senso ma puoi usare select con qualsiasi tipo di valore,
qui abbiamo solo bisogno
di un oggetto, quindi puntiamo agli oggetti headerIOS e headerAndroid. E con ciò, abbiamo un codice più snello, abbiamo
stili più snelli laggiù e quindi abbiamo un codice con uno stile di base in cui utilizziamo la
selezione della piattaforma per selezionare dinamicamente stili diversi in base alla piattaforma su cui stiamo eseguendo e quindi ora, abbiamo
lo stesso aspetto di prima ma ora in un modo più elegante. Un altro posto nella nostra app in cui possiamo trarne
vantaggio è il nostro pulsante principale qui. Il nostro pulsante principale appare e si sente lo stesso su entrambe le piattaforme,
il che non è orribile, ma che potrebbe anche non essere quello che vogliamo.
Se andiamo al nostro pulsante principale. js file, vediamo che usiamo sempre l'opacità tangibile qui ma in realtà
su Android, potremmo voler usare l'effetto a catena.
Ora per fortuna, React Native ha il componente di feedback nativo toccabile incorporato che in realtà ci dà
un oggetto tangibile che ha un effetto
a catena incorporato, quindi vogliamo usarlo su Android e opacità tangibile su iOS.
Ora, naturalmente, possiamo usare l'API della piattaforma che quindi dobbiamo anche importare da React Native per
utilizzare qui un componente diverso basato sulla piattaforma e
per questo possiamo usare una funzionalità davvero accurata React non ha specifici di React
Native ma possiamo usare
in React in generale, possiamo impostare una variabile che inizia con un carattere maiuscolo in modo da poterlo
usare come elemento jsx perché solo le variabili di carattere maiuscolo possono essere usate come elementi jsx e chiamiamo questo, diciamo componente
pulsante, il nome dipende totalmente da te e, per impostazione predefinita, è un'opacità tangibile.
Quindi indico qui l'oggetto di opacità toccabile, senza parentesi angolate, semplicemente indicandolo in questo modo.
Ora possiamo aggiungere un controllo if e verificare se il sistema operativo della piattaforma è uguale ad Android e
importante, controlla anche qualcos'altro
sulla piattaforma, controlla anche se la versione della piattaforma è maggiore o uguale a 21 perché solo l'API Android versione
21 o successiva supporta l'effetto a catena.
Quindi, se entrambi sono veri, imposteremo il componente pulsante su un feedback nativo tangibile, quindi useremo quello
con l'effetto a catena, altrimenti useremo quello con l'effetto di opacità.
Quindi, se siamo su Android e la versione di Android è abbastanza alta, è 21
o successiva, utilizziamo un feedback nativo tangibile. Ora, poiché lo chiamo con un carattere iniziale maiuscolo, possiamo
usarlo qui invece di opacità tangibile nel nostro codice jsx, all'inizio sembra strano ma funzionerà perfettamente. Se ora salviamo questo e questo si
riavvia, vedrai ora qui che hai quell'effetto a catena, puoi vederlo se teniamo premuto, vedi quell'effetto
a catena sul pulsante. Non sembra ancora perfetto perché in realtà è
rettangolare e non rispetta il nostro raggio del bordo e lo
ripareremo ma funziona e d'altra parte qui su iOS, abbiamo l'effetto di opacità come puoi dire se lo premi.
Quindi ora sistemiamo il raggio del bordo e possiamo farlo avvolgendolo con un'altra vista e questo è solo un
piccolo trucco, un po 'di soluzione che devi conoscere.
Lo avvolgiamo con un'altra vista in cui ho impostato uno stile di diciamo contenitore
di pulsanti, aggiungiamo quello stile nel nostro foglio di stile e su quel contenitore di pulsanti qui che ora è avvolto intorno a
tutto, ho
impostato lo stesso raggio del bordo che ho impostato sul pulsante , quindi 25 in questo caso qui e aggiungo un overflow nascosto, il
che significa che qualsiasi componente figlio che andrebbe oltre i confini di questi componenti, quindi del componente con questo
stile è sostanzialmente troncato e questo garantirà che l'effetto a catena che ora è un
il componente figlio di questa vista verrà ritagliato sui bordi arrotondati di questo pulsante.
Quindi ora se lo salviamo e lo riproviamo, vedrai che l'effetto ondulazione riempie solo il pulsante, che
ovviamente sembra molto meglio e su iOS ovviamente, abbiamo ancora lo stesso comportamento di prima.
Quindi usare la piattaforma qui in un controllo if è anche qualcosa che possiamo fare ma
possiamo anche usare questo trucco qui per renderizzare componenti totalmente diversi in base alla piattaforma su cui stiamo
girando.