Hay un par de cosas en las
que podríamos continuar, pero quiero continuar con el contenedor de entrada, que es el
contenedor alrededor de estas entradas, por lo que alrededor de seleccionar un número de texto, alrededor de la entrada de texto
aquí y alrededor de los botones y este contenedor tiene un ancho
y alinea los elementos, pero como describí anteriormente, sería bueno
tener esa tarjeta para mirar allí y para eso, necesitamos algunos estilos más exóticos que suenen realmente elegantes pero
simplemente algunas reglas de estilo que no hemos usado antes.
Por ejemplo, quiero agregar una sombra, una ligera
sombra paralela y lo haces con cuatro propiedades principales que puedes usar. Un color, un desplazamiento, una opacidad y un radio.
Ahora un color de sombra debe ser claro, es el color de tu sombra.
El desplazamiento de la sombra es cuánto está desplazado de su contenedor y
eso realmente toma el objeto que a su vez toma un ancho y una altura, por
lo que podría decir que quiero compensar la sombra por dos píxeles con respecto al ancho y por dos píxeles
con respecto a la altura , eso influye en el efecto tridimensional que está creando. La opacidad describe cuán transparente es esta sombra, si establece la
opacidad en 1, entonces
tiene una sombra totalmente transparente, por lo que es una sombra fuerte muy visible y si aumenta o disminuye,
debería decir, si la establece en 0. 1 por ejemplo, tienes
una sombra que apenas puedes ver. El radio de la sombra básicamente describe cuán nítida
es esa sombra, si tiene bordes ásperos o si es un poco más borrosa, más suave, cosas así.
Entonces, iré con un color de sombra de negro, por cierto, también puede usar códigos hexadecimales
aquí si lo desea y también puede usar códigos RGBA si lo prefiere, ya sea códigos RGB normales en realidad o también con
un alfa canal para describir la transparencia aquí. Aunque la transparencia aquí no tendrá una influencia directa, para
la sombra tendrá que establecer esto con la opacidad de la sombra. Para otros colores, tendría una influencia, pero eso
es solo una nota al margen. Adjunto, encontrará un enlace con más detalles
sobre cómo puede configurar los colores y qué valores de color acepta React Native porque obviamente, eso es
mucho más exhaustivo que lo que puedo mostrar aquí, simplemente iré con el nombre porque quiero
un negro color, entonces ¿por qué no ir con ese atajo? Ahora, además del color, la sombra aquí también recibirá
un desplazamiento y, como dije, el desplazamiento aquí toma un objeto.
Ahora, en caso de que se pregunte cómo sé esto, por ejemplo, mi IDE me dice que si empiezo a escribir el desplazamiento de
la sombra aquí, verá esa pista que obtengo a la derecha, normalmente debería obtener esto también, pero en
caso de que no lo haga entiendo esto, los documentos oficiales son, por supuesto, el lugar para ir y allí, siempre debajo
de guías, componentes y API, puede hacer clic en el componente de visualización allí o simplemente hacer clic en los documentos de
API aquí en la esquina superior derecha y luego elegir su vista allí y allá, encontrará algunos accesorios de estilo y luego podrá encontrar una lista de todos los estilos
de vista que son compatibles y, por supuesto, también cómo los configura y, por ejemplo, aprendió que el desplazamiento de
sombra es un objeto con un número y una altura Para el color, aprendiste que esto toma un color
y ese es exactamente el enlace que encuentras adjunto aquí, donde describe qué
tipo de colores puedes usar.
Así que eso es solo una pequeña nota al margen, aquí usaré un desplazamiento de sombra con un ancho de cero
pero una altura de 2 para que mi sombra se desplace un poco hacia abajo, por decir, no tanto hacia la derecha, entonces
no a la derecha en realidad y luego también agregaré un radio de sombra, que es un número de seis, intentemos y veamos qué
hace y, por último,
pero no menos importante, una opacidad de sombra de 0. 26, que es relativamente transparente, pero creo que se
ve bastante bien.
Además, le daré a mi contenedor de entrada un color de fondo blanco para asegurarme de que siempre sea blanco y
no transparente, que de lo contrario es el predeterminado, de modo que si tuviéramos otro
color de fondo detrás del contenedor, digamos como el color base de toda la pantalla, el contenedor
aquí siempre tendría un fondo blanco.
Ahora con eso, si guarda esto, debería ver una sombra que se parece a esto
en iOS pero no ve ninguna sombra en Android y eso
no es un error, en cambio las propiedades de sombra aquí solo funcionan en iOS y eso deja una importante pregunta, ¿cómo puedes
establecer una sombra en Android entonces? ¿Eso no es posible?
Es pero allí tienes un accesorio de estilo especial, el accesorio de elevación. Esto solo funciona en Android como la información sobre herramientas también
muestra aquí, la plataforma Android, mientras que las propiedades de sombra solo funcionan en iOS. Ahora, la elevación simplemente toma una cantidad de 5, y luego usa
la elevación de diseño de material de Android predeterminada, por lo que tiene menos control allí, pero por otro
lado, obtiene el aspecto de diseño de material predeterminado al que sus usuarios podrían
estar acostumbrados de todos modos, así que eso es Lo bueno de esto y ahora también
tenemos una sombra aquí en Android y en iOS. En iOS, también notará que la sombra es visible a la
izquierda y a la derecha del cuadro, aunque le di un desplazamiento de sombra de 0 para el ancho, que
puede controlarse con el radio de la sombra, si configura la sombra radio a cero, entonces verá que
solo tiene la sombra donde definió su desplazamiento aquí, por lo que puede asegurarse de que la
sombra realmente solo esté allí donde la desea. Sin embargo, si establece un radio de sombra y, de manera
predeterminada, también hay un radio de sombra predeterminado, obtendrá este efecto de derrame, que es una sombra más
natural después de todo, así que aquí es realmente el efecto que quiero. Ahora con eso, agregué una sombra tanto en Android usando
la sombra predeterminada de Android como en iOS. Por cierto, en Android, por supuesto, puede cambiar
el nivel de elevación para jugar con diferentes niveles de elevación hasta que tenga el aspecto que desea
para su aplicación, básicamente tiene suficiente sombra. Ahora, además de tener la sombra aquí,
creo que sería bueno tener algo de relleno en este cuadro ahora porque los elementos se sientan demasiado
cerca de los bordes, después de todo, se sientan directamente en los bordes. Entonces, para cambiar esto, también agregaré un poco de relleno aquí
y será de 20 y nuevamente, ese es un valor con el que puedes experimentar, encuentra
el relleno que prefieres personalmente y crees que se ve bien y si intentamos eso, ahora esto se ve mucho mejor.
Además, las esquinas redondeadas serían
algo agradable, por lo que agregaré aquí un radio de borde de digamos 10 para tener bordes ligeramente redondeados.
Si ahora guardamos eso, esto me parece bastante dulce en ambas plataformas, en ambos dispositivos.
Así que este es ahora el contenedor
de entrada, no podemos ver la entrada y los botones probablemente también deberían tener el mismo tamaño,
pero al menos, el contenedor ahora se ve bien.