1 00:00:04,540 --> 00:00:11,110 Los estilos en línea son muy fáciles de aplicar, pero su desventaja es que cuanto más compleja se vuelve 2 00:00:11,110 --> 00:00:18,260 tu aplicación y se vuelve tu configuración, tu componente se vuelve más difícil de seguir junto con todos estos estilos en línea. 3 00:00:18,370 --> 00:00:24,040 Tendrá un montón de código allí, en su código jsx y puede ser difícil de leer, de 4 00:00:24,040 --> 00:00:24,720 entenderlo. 5 00:00:24,870 --> 00:00:27,870 Por lo tanto, aunque puede usar estilos en línea, en 6 00:00:27,940 --> 00:00:32,740 realidad se recomienda usar un objeto de hoja de estilo y eso es exactamente lo que se 7 00:00:32,740 --> 00:00:33,820 está creando allí. 8 00:00:33,820 --> 00:00:39,120 Esto usa una hoja de estilo que es una clase al final proporcionada por React 9 00:00:39,130 --> 00:00:46,660 Native, por eso la importamos desde allí y esto al final crea un objeto Javascript que contiene toda la configuración de estilo. 10 00:00:46,660 --> 00:00:51,940 La diferencia con un objeto Javascript vainilla que también podría crear por 11 00:00:51,940 --> 00:00:59,590 su cuenta es simplemente esa hoja de estilo. create podría en el futuro también aplicar algunas optimizaciones de rendimiento y aplicar sus 12 00:00:59,590 --> 00:01:01,530 estilos de manera más eficiente al final. 13 00:01:01,600 --> 00:01:07,480 Por lo tanto, debe usar eso porque no pierde nada, pero en el futuro, 14 00:01:07,540 --> 00:01:12,190 podría beneficiarse de optimizaciones adicionales. En este momento, cuando estoy grabando esto, sin embargo, 15 00:01:12,190 --> 00:01:17,800 no hay diferencia, pero nuevamente debería usar la hoja de estilo. cree porque no hará daño y es posible que obtenga 16 00:01:17,800 --> 00:01:22,120 optimizaciones de rendimiento adicionales en el futuro. Otra ventaja de usar la hoja de 17 00:01:22,120 --> 00:01:28,150 estilo es que esto agregará automáticamente algo de validación, lo que significa que si está usando una propiedad de estilo incorrecta 18 00:01:28,150 --> 00:01:33,550 o un valor incorrecto, React Native lo detectará y arrojará un error que simplemente hace que sea más fácil 19 00:01:33,550 --> 00:01:35,380 detectarlo. tales errores, si no 20 00:01:35,470 --> 00:01:39,370 hubiera validación, fallaría en silencio, simplemente no aplicaría el estilo y es posible que 21 00:01:39,370 --> 00:01:45,160 ni siquiera lo vea al instante o verá que el estilo no es correcto pero realmente no ve por qué 22 00:01:45,160 --> 00:01:48,070 no funciona, por lo tanto, esta validación incorporada es otra 23 00:01:48,070 --> 00:01:53,950 ventaja de usar ese objeto de hoja de estilo aquí. Para crear, pasa un objeto Javascript como argumento, por 24 00:01:54,040 --> 00:01:56,680 lo que el argumento que pasa aquí 25 00:01:56,680 --> 00:02:01,450 es un objeto Javascript y en ese objeto, ahora puede definir sus estilos y 26 00:02:01,450 --> 00:02:07,000 no lo hace agregando el relleno 10 porque no estaría claro dónde esto debe aplicarse, en su 27 00:02:07,000 --> 00:02:08,020 lugar, utilice 28 00:02:08,020 --> 00:02:15,280 cualquier nombre de propiedad de su elección, como por ejemplo pantalla, para configurar el estilo de nuestra vista de pantalla general, por 29 00:02:15,370 --> 00:02:16,810 lo que para este 30 00:02:16,810 --> 00:02:21,040 nivel superior de usted aquí y podría haber elegido el nombre que 31 00:02:21,040 --> 00:02:26,490 desee aquí, esto No tiene que ser pantalla. Aquí, ahora tiene un objeto Javascript 32 00:02:26,560 --> 00:02:30,610 anidado, por lo que el valor de esta propiedad es otro 33 00:02:30,610 --> 00:02:33,800 objeto Javascript y allí, configura el relleno 50 por 34 00:02:33,820 --> 00:02:37,630 ejemplo, por lo que el estilo que teníamos allí también. 35 00:02:37,700 --> 00:02:40,510 Ahora podemos eliminar ese estilo aquí, todavía tengo la 36 00:02:40,520 --> 00:02:45,980 propiedad de estilo pero ya no tengo el objeto de estilo en línea y en su lugar aquí, 37 00:02:46,010 --> 00:02:52,120 ahora apunto a estilos, que es esta constante que contiene nuestro objeto de hoja de estilo, apunto a estilos y 38 00:02:52,150 --> 00:02:58,430 luego con punto, señalo el estilo de pantalla y eso es lo que quise decir, puedes elegir el nombre que quieras 39 00:02:58,430 --> 00:03:00,090 aquí, si hubieras nombrado 40 00:03:00,170 --> 00:03:06,440 esta raíz, entonces solo tendrías que usar la raíz allí. Para que pueda usar el nombre que desee, solo 41 00:03:06,440 --> 00:03:07,160 tiene que 42 00:03:07,160 --> 00:03:12,550 asegurarse de que los nombres que usa allí coincidan con los nombres que usa aquí y ahora 43 00:03:12,570 --> 00:03:18,540 solo le dice a React Native que esta vista debería tener los estilos definidos para la pantalla allí abajo. 44 00:03:18,650 --> 00:03:20,990 Puede hacer lo mismo para nuestro contenedor de entrada, 45 00:03:20,990 --> 00:03:25,860 digamos, nuevamente este nombre depende totalmente de usted, contenedor de entrada. Aquí tomaré este objeto 46 00:03:25,880 --> 00:03:28,400 de estilo que apliqué como un 47 00:03:28,400 --> 00:03:37,130 estilo en línea a esta vista antes y lo apliqué como mi valor para este contenedor de entrada. 48 00:03:37,130 --> 00:03:42,260 Ahora aquí en esa vista, hacemos referencia a estilos. inputContainer, ahora con algo de 49 00:03:42,260 --> 00:03:48,110 formato automático que puede hacer en Visual Studio Code yendo a preferencias, atajos de teclado 50 00:03:49,130 --> 00:03:54,860 y luego buscar documento de formato, ese es el atajo que desea presionar para 51 00:03:55,010 --> 00:04:00,780 que los documentos se autoformaten, el archivo. Con eso, tenemos una estructura de código limpia aquí, NOSOTROS 52 00:04:00,860 --> 00:04:04,710 vemos que estos son nuestros estilos de contenedor de entrada y los aplicamos aquí. 53 00:04:04,730 --> 00:04:10,910 Otra ventaja de tener este objeto de hoja de estilo es que también puede aplicar el mismo estilo 54 00:04:10,910 --> 00:04:12,680 a múltiples vistas sin copiarlo. 55 00:04:12,710 --> 00:04:18,200 Entonces, si queremos tener el estilo del contenedor de entrada, no solo en esta vista sino también en 56 00:04:18,350 --> 00:04:25,160 esta de allí abajo, simplemente podríamos escribir estilos de estilo. inputContainer, puede aplicar este estilo a tantos componentes 57 00:04:25,190 --> 00:04:26,290 como desee. 58 00:04:26,290 --> 00:04:32,460 Ahora, por supuesto, no lo necesito aquí, pero podríamos usarlo aquí si lo necesitamos. Ahora el último estilo que quiero aplicar está 59 00:04:32,460 --> 00:04:35,030 en la entrada de texto aquí. 60 00:04:35,030 --> 00:04:40,970 Allí, solo nombraré esta entrada, demasiadas llaves, configure mis estilos aquí y 61 00:04:41,130 --> 00:04:55,430 luego en la entrada de texto, consulte los estilos. entrada, así. 62 00:04:55,560 --> 00:05:01,320 Y con eso, si guardamos esto, tenemos el mismo aspecto que antes, pero ahora estamos usando el objeto de hoja de estilo 63 00:05:01,320 --> 00:05:05,610 que hace que compartir y reutilizar estilos sea más fácil y que posiblemente también nos 64 00:05:05,610 --> 00:05:10,290 brinde algunas optimizaciones de rendimiento futuras y, además, nuestro código jsx aquí simplemente es mucho más delgado ahora.