1
00:00:02,200 --> 00:00:04,720
Hay un par de cosas en las

2
00:00:04,740 --> 00:00:08,950
que podríamos continuar, pero quiero continuar con el contenedor de entrada, que es el

3
00:00:08,980 --> 00:00:15,340
contenedor alrededor de estas entradas, por lo que alrededor de seleccionar un número de texto, alrededor de la entrada de texto

4
00:00:15,340 --> 00:00:18,970
aquí y alrededor de los botones y este contenedor tiene un ancho

5
00:00:18,970 --> 00:00:21,820
y alinea los elementos, pero como describí anteriormente, sería bueno

6
00:00:21,820 --> 00:00:27,410
tener esa tarjeta para mirar allí y para eso, necesitamos algunos estilos más exóticos que suenen realmente elegantes pero

7
00:00:27,410 --> 00:00:30,450
simplemente algunas reglas de estilo que no hemos usado antes.

8
00:00:30,470 --> 00:00:34,080
Por ejemplo, quiero agregar una sombra, una ligera

9
00:00:34,110 --> 00:00:43,310
sombra paralela y lo haces con cuatro propiedades principales que puedes usar. Un color, un desplazamiento, una opacidad y un radio.

10
00:00:43,310 --> 00:00:46,760
Ahora un color de sombra debe ser claro, es el color de tu sombra.

11
00:00:46,760 --> 00:00:50,210
El desplazamiento de la sombra es cuánto está desplazado de su contenedor y

12
00:00:50,210 --> 00:00:54,290
eso realmente toma el objeto que a su vez toma un ancho y una altura, por

13
00:00:54,290 --> 00:00:59,390
lo que podría decir que quiero compensar la sombra por dos píxeles con respecto al ancho y por dos píxeles

14
00:00:59,390 --> 00:01:07,220
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

15
00:01:07,280 --> 00:01:08,990
opacidad en 1, entonces

16
00:01:08,990 --> 00:01:15,950
tiene una sombra totalmente transparente, por lo que es una sombra fuerte muy visible y si aumenta o disminuye,

17
00:01:15,950 --> 00:01:21,800
debería decir, si la establece en 0. 1 por ejemplo, tienes

18
00:01:21,950 --> 00:01:28,910
una sombra que apenas puedes ver. El radio de la sombra básicamente describe cuán nítida

19
00:01:28,910 --> 00:01:35,290
es esa sombra, si tiene bordes ásperos o si es un poco más borrosa, más suave, cosas así.

20
00:01:35,330 --> 00:01:40,610
Entonces, iré con un color de sombra de negro, por cierto, también puede usar códigos hexadecimales

21
00:01:40,610 --> 00:01:47,720
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

22
00:01:47,870 --> 00:01:53,270
un alfa canal para describir la transparencia aquí. Aunque la transparencia aquí no tendrá una influencia directa, para

23
00:01:53,270 --> 00:01:59,030
la sombra tendrá que establecer esto con la opacidad de la sombra. Para otros colores, tendría una influencia, pero eso

24
00:01:59,030 --> 00:02:04,100
es solo una nota al margen. Adjunto, encontrará un enlace con más detalles

25
00:02:04,100 --> 00:02:09,260
sobre cómo puede configurar los colores y qué valores de color acepta React Native porque obviamente, eso es

26
00:02:09,260 --> 00:02:14,030
mucho más exhaustivo que lo que puedo mostrar aquí, simplemente iré con el nombre porque quiero

27
00:02:14,030 --> 00:02:20,420
un negro color, entonces ¿por qué no ir con ese atajo? Ahora, además del color, la sombra aquí también recibirá

28
00:02:20,510 --> 00:02:23,990
un desplazamiento y, como dije, el desplazamiento aquí toma un objeto.

29
00:02:23,990 --> 00:02:31,040
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

30
00:02:31,040 --> 00:02:36,530
la sombra aquí, verá esa pista que obtengo a la derecha, normalmente debería obtener esto también, pero en

31
00:02:36,530 --> 00:02:42,830
caso de que no lo haga entiendo esto, los documentos oficiales son, por supuesto, el lugar para ir y allí, siempre debajo

32
00:02:42,830 --> 00:02:49,100
de guías, componentes y API, puede hacer clic en el componente de visualización allí o simplemente hacer clic en los documentos de

33
00:02:49,100 --> 00:02:57,800
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

34
00:02:57,860 --> 00:03:03,890
de vista que son compatibles y, por supuesto, también cómo los configura y, por ejemplo, aprendió que el desplazamiento de

35
00:03:03,890 --> 00:03:10,040
sombra es un objeto con un número y una altura Para el color, aprendiste que esto toma un color

36
00:03:10,040 --> 00:03:14,630
y ese es exactamente el enlace que encuentras adjunto aquí, donde describe qué

37
00:03:14,630 --> 00:03:16,740
tipo de colores puedes usar.

38
00:03:17,030 --> 00:03:24,020
Así que eso es solo una pequeña nota al margen, aquí usaré un desplazamiento de sombra con un ancho de cero

39
00:03:24,020 --> 00:03:32,030
pero una altura de 2 para que mi sombra se desplace un poco hacia abajo, por decir, no tanto hacia la derecha, entonces

40
00:03:32,030 --> 00:03:40,310
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é

41
00:03:40,310 --> 00:03:41,870
hace y, por último,

42
00:03:42,650 --> 00:03:49,970
pero no menos importante, una opacidad de sombra de 0. 26, que es relativamente transparente, pero creo que se

43
00:03:49,970 --> 00:03:51,610
ve bastante bien.

44
00:03:51,850 --> 00:03:58,480
Además, le daré a mi contenedor de entrada un color de fondo blanco para asegurarme de que siempre sea blanco y

45
00:03:58,480 --> 00:04:03,370
no transparente, que de lo contrario es el predeterminado, de modo que si tuviéramos otro

46
00:04:03,370 --> 00:04:08,890
color de fondo detrás del contenedor, digamos como el color base de toda la pantalla, el contenedor

47
00:04:08,920 --> 00:04:11,100
aquí siempre tendría un fondo blanco.

48
00:04:11,140 --> 00:04:16,180
Ahora con eso, si guarda esto, debería ver una sombra que se parece a esto

49
00:04:16,180 --> 00:04:20,190
en iOS pero no ve ninguna sombra en Android y eso

50
00:04:20,410 --> 00:04:28,120
no es un error, en cambio las propiedades de sombra aquí solo funcionan en iOS y eso deja una importante pregunta, ¿cómo puedes

51
00:04:28,120 --> 00:04:32,820
establecer una sombra en Android entonces? ¿Eso no es posible?

52
00:04:33,070 --> 00:04:39,610
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

53
00:04:39,610 --> 00:04:48,280
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

54
00:04:48,280 --> 00:04:55,090
la elevación de diseño de material de Android predeterminada, por lo que tiene menos control allí, pero por otro

55
00:04:55,090 --> 00:05:00,130
lado, obtiene el aspecto de diseño de material predeterminado al que sus usuarios podrían

56
00:05:00,130 --> 00:05:06,070
estar acostumbrados de todos modos, así que eso es Lo bueno de esto y ahora también

57
00:05:06,340 --> 00:05:13,590
tenemos una sombra aquí en Android y en iOS. En iOS, también notará que la sombra es visible a la

58
00:05:13,590 --> 00:05:19,840
izquierda y a la derecha del cuadro, aunque le di un desplazamiento de sombra de 0 para el ancho, que

59
00:05:19,840 --> 00:05:25,480
puede controlarse con el radio de la sombra, si configura la sombra radio a cero, entonces verá que

60
00:05:25,480 --> 00:05:30,970
solo tiene la sombra donde definió su desplazamiento aquí, por lo que puede asegurarse de que la

61
00:05:30,970 --> 00:05:37,060
sombra realmente solo esté allí donde la desea. Sin embargo, si establece un radio de sombra y, de manera

62
00:05:37,060 --> 00:05:41,350
predeterminada, también hay un radio de sombra predeterminado, obtendrá este efecto de derrame, que es una sombra más

63
00:05:41,350 --> 00:05:47,860
natural después de todo, así que aquí es realmente el efecto que quiero. Ahora con eso, agregué una sombra tanto en Android usando

64
00:05:47,920 --> 00:05:53,500
la sombra predeterminada de Android como en iOS. Por cierto, en Android, por supuesto, puede cambiar

65
00:05:53,500 --> 00:05:59,950
el nivel de elevación para jugar con diferentes niveles de elevación hasta que tenga el aspecto que desea

66
00:05:59,950 --> 00:06:05,530
para su aplicación, básicamente tiene suficiente sombra. Ahora, además de tener la sombra aquí,

67
00:06:05,530 --> 00:06:11,680
creo que sería bueno tener algo de relleno en este cuadro ahora porque los elementos se sientan demasiado

68
00:06:11,680 --> 00:06:20,350
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í

69
00:06:20,350 --> 00:06:26,440
y será de 20 y nuevamente, ese es un valor con el que puedes experimentar, encuentra

70
00:06:26,440 --> 00:06:33,910
el relleno que prefieres personalmente y crees que se ve bien y si intentamos eso, ahora esto se ve mucho mejor.

71
00:06:33,970 --> 00:06:36,700
Además, las esquinas redondeadas serían

72
00:06:37,120 --> 00:06:45,870
algo agradable, por lo que agregaré aquí un radio de borde de digamos 10 para tener bordes ligeramente redondeados.

73
00:06:45,870 --> 00:06:52,940
Si ahora guardamos eso, esto me parece bastante dulce en ambas plataformas, en ambos dispositivos.

74
00:06:52,940 --> 00:06:54,740
Así que este es ahora el contenedor

75
00:06:54,770 --> 00:06:58,570
de entrada, no podemos ver la entrada y los botones probablemente también deberían tener el mismo tamaño,

76
00:06:58,820 --> 00:07:00,950
pero al menos, el contenedor ahora se ve bien.