Ci sono un paio di cose in
cui potremmo continuare ma voglio continuare con il contenitore di input, che è il
contenitore attorno a questi input, quindi intorno al testo di selezione di un numero, attorno al input di testo qui e attorno
ai pulsanti e questo contenitore ha un larghezza e allinea gli oggetti,
ma come ho descritto prima, sarebbe bello avere quella carta
per guardare lì e per questo, abbiamo bisogno di alcuni stili più esotici che suonino davvero fantasiosi ma semplicemente
alcune regole di stile che non abbiamo mai usato prima.
Ad esempio, voglio aggiungere un'ombra, una leggera ombra
esterna e lo fai con quattro proprietà principali che puoi usare. Un colore, un offset, un'opacità e un raggio.
Ora un colore dell'ombra dovrebbe essere chiaro, è il colore della tua ombra.
Lo scostamento dell'ombra è quanto lo scostamento dal contenitore e
che effettivamente prende l'oggetto che a sua volta prende una larghezza e un'altezza,
quindi si potrebbe dire che voglio compensare l'ombra di due pixel rispetto alla larghezza e di
due pixel rispetto all'altezza , ciò influenza l'effetto tridimensionale che stai creando. L'opacità descrive quanto sia trasparente questa ombra, se si imposta l'opacità
su 1, allora si
ha un'ombra totalmente in trasparente, quindi un'ombra forte molto visibile e se si aumenta quello o si diminuisce quello che
dovrei dire, se lo si imposta su 0. 1 ad esempio, hai un'ombra
che riesci a malapena a vedere. Il raggio dell'ombra descrive quindi quanto sia nitida
quell'ombra, se ha bordi irregolari o se è un po 'più sfocata, più morbida, cose del genere.
Quindi qui, andrò con un colore dell'ombra di nero, dal modo in cui puoi anche usare
codici esadecimali qui se vuoi e puoi anche usare codici RGBA se preferisci questo, o normali codici RGB in realtà o anche con
un alfa canale per descrivere la trasparenza qui. Anche se la trasparenza qui non avrà
un'influenza diretta, per l'ombra dovrai impostarla con l'opacità dell'ombra. Per altri colori, avrebbe un'influenza ma questa
è solo una nota a margine. In allegato, troverai un link con maggiori
dettagli su come configurare i colori e quali valori di colore accetta React Native perché, ovviamente, è
molto più esaustivo di quello che posso mostrare qui, andrò semplicemente con il nome perché
voglio un nero colore, quindi perché non andare con quella scorciatoia? Ora oltre al colore, qui l'ombra riceverà anche un
offset e come ho detto, offset qui prende un oggetto.
Ora, nel caso ti chiedi come lo so, per uno che mi dice il mio IDE, se comincio a digitare shadow offset
qui, vedi quel suggerimento che ottengo sulla destra, dovresti normalmente ottenere anche questo, ma nel caso in
cui non lo sapessi ottieni questo, i documenti ufficiali sono ovviamente il posto dove andare e lì, sempre sotto guide,
componenti e API, puoi fare clic sul componente di visualizzazione lì o semplicemente fare clic sui documenti API qui
nell'angolo in alto a destra e quindi scegliere la tua vista qua e là, troverai alcuni oggetti di scena e poi puoi trovare un elenco di tutti
gli stili di vista supportati e ovviamente anche come configurarli e lì, ad esempio, hai imparato che l'offset dell'ombra
è un oggetto con un numero e un'altezza. Per il colore, hai imparato che questo prende un
colore ed è esattamente il link che trovi allegato qui, dove ha descritto quale
tipo di colori puoi usare.
Quindi questa è solo una piccola nota a margine, qui userò un offset dell'ombra con una larghezza di zero
ma un'altezza di 2 in modo che la mia ombra sia leggermente spostata verso il basso, per così dire, non tanto a
destra, quindi in realtà non è affatto a destra e quindi aggiungerò anche un raggio d'ombra che è un numero di proviamo sei
e vediamo cosa fa
e, ultimo ma non meno importante, un'opacità dell'ombra di 0. 26 che è relativamente trasparente ma che a mio
avviso sembra abbastanza carino.
Inoltre, darò al mio contenitore di input un colore di sfondo bianco per assicurarmi che sia sempre bianco e
non trasparente, che altrimenti è l'impostazione predefinita in modo che se avessimo un altro
colore di sfondo dietro il contenitore, diciamo come colore di base di l'intero schermo, il contenitore
qui avrebbe sempre uno sfondo bianco.
Ora con ciò, se salvi questo, dovresti vedere un'ombra simile a questa su
iOS ma non vedi alcuna ombra su Android e non è
un bug, invece le proprietà dell'ombra qui funzionano solo su iOS e questo lascia un aspetto importante domanda, come puoi
impostare un'ombra su Android allora? Non è possibile?
È ma lì hai un supporto di stile speciale, l'elica di elevazione. Funziona solo su Android come mostra anche la
descrizione comando, piattaforma Android mentre le proprietà dell'ombra funzionano solo su iOS. Ora l'elevazione richiede semplicemente un numero di diciamo 5 e
quindi utilizza l'elevazione del design del materiale Android predefinito, quindi hai meno controllo lì, ma d'altra parte,
ottieni l'aspetto del design del materiale predefinito a cui i tuoi utenti
potrebbero comunque essere abituati, quindi questo è la cosa buona di questo e ora abbiamo
anche un'ombra qui su Android e su iOS. Su iOS, noterai anche che l'ombra è visibile a sinistra
e a destra del riquadro, anche se ho dato a questo un offset dell'ombra di 0 per la
larghezza, che può essere controllato con il raggio dell'ombra, tuttavia, se imposti l'ombra raggio a zero, poi
vedi che hai solo l'ombra in cui hai definito il suo offset qui, quindi puoi assicurarti
che l'ombra sia davvero lì solo dove vuoi. Se imposti un raggio d'ombra però e per impostazione predefinita,
c'è anche un raggio d'ombra predefinito, ottieni questo effetto di fuoriuscita che è un'ombra più
naturale dopo tutto, quindi qui è in realtà l'effetto che voglio. Ora, con quello, ho aggiunto un'ombra sia su Android
usando l'ombra Android predefinita che su iOS. A proposito su Android, puoi ovviamente cambiare il
livello di elevazione per giocare con diversi livelli di elevazione fino a quando non hai l'aspetto desiderato per la
tua applicazione, in pratica hai abbastanza ombra. Ora oltre ad avere l'ombra qui,
penso che sarebbe bello avere un po 'di imbottitura in questa scatola ora perché gli
oggetti siedono troppo vicino ai bordi, dopotutto siedono direttamente sui bordi. Quindi, per cambiare questo, aggiungerò anche un po 'di padding
qui e quello sarà di padding di 20 e ancora, questo è un valore che puoi
sperimentare, trova il padding che preferisci personalmente e pensi che sia bello e se ci proviamo, ora sembra molto meglio.
Inoltre, gli angoli arrotondati sarebbero
una buona cosa, quindi aggiungerò qui un raggio del bordo di diciamo 10 per avere bordi leggermente arrotondati.
Se ora lo salviamo, questo mi sembra abbastanza dolce su entrambe le piattaforme, su entrambi i dispositivi.
Quindi questo è ora il contenitore
di input, non possiamo vedere l'input e probabilmente i pulsanti dovrebbero avere le stesse
dimensioni ma almeno il contenitore ora sembra buono.