1 00:00:02,290 --> 00:00:08,230 Ahora con ese contenedor de entrada definido y con un par de nuevos estilos cubiertos, por 2 00:00:08,270 --> 00:00:12,580 lo tanto, podemos hacer algo que mencioné que siempre sería una 3 00:00:12,640 --> 00:00:16,380 buena idea, podemos dividir nuestra aplicación en múltiples componentes. 4 00:00:16,600 --> 00:00:17,800 Este aspecto aquí, este 5 00:00:17,800 --> 00:00:24,100 aspecto del contenedor de entrada, este aspecto de la tarjeta es probablemente algo que también queremos usar en otras partes de 6 00:00:24,100 --> 00:00:24,890 la aplicación. 7 00:00:25,060 --> 00:00:28,450 Es posible que tengamos diferentes artículos que queremos presentar en 8 00:00:28,450 --> 00:00:32,680 dicha tarjeta, considere que está construyendo una tienda en línea donde tiene cada 9 00:00:32,680 --> 00:00:39,160 producto en dicha tarjeta en la pantalla de resumen. Ahora, para evitar repetir esta definición de estilo una 10 00:00:39,160 --> 00:00:45,130 y otra vez, podemos subcontratarla en un componente separado, un componente que realmente no tiene mucha lógica 11 00:00:45,160 --> 00:00:46,950 pero que controla el 12 00:00:47,080 --> 00:00:53,050 estilo de su contenido, un componente puramente presentacional. Técnicamente, todavía es un componente React normal y, por lo tanto, crearé un nuevo 13 00:00:53,050 --> 00:00:58,450 archivo aquí en la carpeta de componentes y lo nombraré tarjeta. El nombre depende de usted, pero es esta apariencia típica 14 00:00:58,450 --> 00:00:59,400 de tarjeta, por 15 00:00:59,410 --> 00:01:01,510 lo que me parece un nombre apropiado. 16 00:01:02,220 --> 00:01:11,290 Ahora aquí, como siempre, importa React from React y luego también importa la vista de React Native aquí y luego crea el 17 00:01:11,290 --> 00:01:20,830 componente de la tarjeta, un componente funcional como este que al final exportas por defecto y obviamente ya que se trata de una 18 00:01:21,310 --> 00:01:22,900 presentación aquí, nosotros 19 00:01:22,900 --> 00:01:28,630 Necesitará la hoja de estilo para crear un objeto de estilo porque eso será 20 00:01:28,630 --> 00:01:31,120 lo esencial de este componente, debe 21 00:01:31,120 --> 00:01:36,200 estar allí para envolver cualquier contenido y simplemente aplicar un estilo general. 22 00:01:37,270 --> 00:01:42,600 Ahora, voy a la pantalla de inicio del juego y tomaré todos los estilos aquí del contenedor de entrada, 23 00:01:42,700 --> 00:01:49,180 los copiaré desde allí y los agregaré a la tarjeta. Aquí agregaré una nueva propiedad de tarjeta y 24 00:01:49,180 --> 00:01:49,790 usaré 25 00:01:51,220 --> 00:01:54,880 mis estilos aquí y dentro del componente de la tarjeta, 26 00:01:55,020 --> 00:01:59,670 tendré un marcado muy simple, por así decirlo, un código jsx muy simple. 27 00:01:59,670 --> 00:02:05,900 Es solo una vista que devuelvo aquí, que debería estar envuelta alrededor de accesorios para niños, accesorios para 28 00:02:05,910 --> 00:02:11,880 niños es ese accesorio especial en React que es básicamente el contenido que pasa entre las etiquetas 29 00:02:11,880 --> 00:02:18,570 de apertura y cierre de su componente personalizado. Por lo tanto, puede envolverse alrededor de cualquier contenido porque el 30 00:02:18,570 --> 00:02:25,400 único objetivo de este componente de la tarjeta es aplicar algo de estilo al contenedor circundante y lo hacemos agregando aquí la tarjeta de estilos. 31 00:02:25,510 --> 00:02:32,610 Ahora solo hay una cosa, hay ciertos estilos aquí que probablemente no deberían establecerse desde el interior de 32 00:02:32,610 --> 00:02:33,790 la tarjeta, 33 00:02:33,810 --> 00:02:41,580 no todas las tarjetas pueden tener este ancho o ancho máximo y no todas las tarjetas deben centrar su contenido. 34 00:02:41,580 --> 00:02:47,220 Por lo tanto, cortaré estos tres elementos desde allí y solo tendré la sombra y el relleno 35 00:02:47,220 --> 00:02:50,890 configurados aquí y quiero que esto sea un poco más flexible. 36 00:02:50,970 --> 00:02:57,780 Además de los estilos de tarjeta, sería bueno si también pudiéramos asignar nuestros propios estilos desde el 37 00:02:57,780 --> 00:03:07,440 exterior y tal vez incluso anular algunos de los estilos de tarjeta. Podemos hacer esto pasando un nuevo objeto al accesorio de estilo y distribuyendo 38 00:03:07,530 --> 00:03:13,730 todas las propiedades, todos los pares clave-valor de nuestro estilo de cartas aquí en este nuevo objeto. 39 00:03:13,800 --> 00:03:20,400 Este es el operador de propagación, una característica moderna de Javascript que extrae todos los pares clave-valor de un objeto de 40 00:03:20,460 --> 00:03:23,910 ese objeto y lo agrega a un nuevo objeto circundante. 41 00:03:24,150 --> 00:03:28,170 Así que copiamos todos los estilos definidos allí abajo en este nuevo objeto 42 00:03:28,170 --> 00:03:34,170 y estoy haciendo esto para que también pueda agregar otro par clave-valor aquí u otro conjunto de pares clave-valor 43 00:03:34,170 --> 00:03:41,370 donde tomo todos los estilos definidos en los estilos de accesorios, así que en el accesorio de estilo que pasé a mi propio componente 44 00:03:41,370 --> 00:03:42,090 personalizado, 45 00:03:42,090 --> 00:03:48,060 tomo todos los pares clave-valor definidos allí y los combino en este objeto y, como hago esto en segundo 46 00:03:48,240 --> 00:03:53,760 lugar, esto anulará cualquier par clave-valor configurado en la tarjeta de estilos, para que podamos anular cualquier estilo 47 00:03:53,760 --> 00:03:56,700 configurado allí desde afuera cuando usamos nuestro componente y 48 00:03:56,700 --> 00:04:02,100 cuando agregamos estilos adicionales fuera del componente, también lo fusionaremos y lo consideraremos, y con eso también 49 00:04:02,140 --> 00:04:08,160 podemos asignar nuestros propios estilos desde afuera del componente de la tarjeta cuando usamos el componente de la tarjeta y 50 00:04:08,160 --> 00:04:12,730 usar el componente de la tarjeta es algo que tendría sentido como el siguiente paso. 51 00:04:12,750 --> 00:04:20,040 Así que vamos a la pantalla de inicio del juego e importamos la tarjeta desde la carpeta de componentes y 52 00:04:20,040 --> 00:04:28,220 allí desde la carpeta de la tarjeta y reemplazamos nuestra vista del contenedor de entrada aquí con la tarjeta, así, así, con etiquetas 53 00:04:28,220 --> 00:04:29,920 de apertura y cierre. 54 00:04:29,930 --> 00:04:35,420 Ahora, de nuevo, quiero establecer mis propios estilos, quiero establecer mi propio ancho, ancho máximo y alinear elementos, 55 00:04:35,510 --> 00:04:39,040 así que mantendré el contenedor de entrada en la hoja de 56 00:04:39,320 --> 00:04:46,030 estilos allí, pero ahora me deshaceré de todos los otros estilos allí, todos los estilos que ahora están configurados en la tarjeta para 57 00:04:46,100 --> 00:04:46,650 que 58 00:04:46,790 --> 00:04:54,920 solo mantengamos el ancho y la alineación aquí y luego agreguemos esto aquí a la tarjeta en el accesorio de estilo que se acepta o que tiene un 59 00:04:54,980 --> 00:05:01,280 efecto porque en el componente de la tarjeta, es ese accesorio de estilo el que Me fusiono con mis otros estilos, 60 00:05:01,280 --> 00:05:10,250 por lo que para ese accesorio de estilo, señalaré el contenedor de entrada de estilos. Ahora con eso, si guardamos eso, obtengo un error, 61 00:05:10,250 --> 00:05:12,330 el objeto no es 62 00:05:12,350 --> 00:05:17,350 una función cerca de la hoja de estilo React Native. 63 00:05:17,420 --> 00:05:24,250 Entonces en la tarjeta. archivo js como señala aquí, algo está mal, incluso me da el número de línea, 64 00:05:24,260 --> 00:05:30,890 es la línea 10, eso es lo que significa este número aquí y sí, mi problema aquí es que uso una hoja de estilo como esta, eso está mal, 65 00:05:30,920 --> 00:05:31,640 en su lugar 66 00:05:31,640 --> 00:05:35,760 tenemos que llamar a la hoja de estilo . crear para definir nuestros propios estilos, así que esa 67 00:05:35,780 --> 00:05:37,010 es la sintaxis correcta. 68 00:05:37,010 --> 00:05:42,240 Entonces es un error de sintaxis, técnicamente no es un error de sintaxis, pero estoy usando el objeto de hoja de estilo incorrectamente. 69 00:05:42,410 --> 00:05:46,430 Así que es un error de mi parte, el mensaje de error nos ayudó con 70 00:05:46,430 --> 00:05:52,420 eso y ahora tenemos el mismo aspecto que antes, pero tenemos esa tarjeta reutilizable que ahora podemos usar en cualquier lugar donde 71 00:05:52,430 --> 00:05:55,280 queramos tener exactamente este aspecto con las sombras y pronto.