Ahora con ese contenedor de entrada definido y con un par de nuevos estilos cubiertos, por
lo tanto, podemos hacer algo que mencioné que siempre sería una
buena idea, podemos dividir nuestra aplicación en múltiples componentes.
Este aspecto aquí, este
aspecto del contenedor de entrada, este aspecto de la tarjeta es probablemente algo que también queremos usar en otras partes de
la aplicación.
Es posible que tengamos diferentes artículos que queremos presentar en
dicha tarjeta, considere que está construyendo una tienda en línea donde tiene cada
producto en dicha tarjeta en la pantalla de resumen. Ahora, para evitar repetir esta definición de estilo una
y otra vez, podemos subcontratarla en un componente separado, un componente que realmente no tiene mucha lógica
pero que controla el
estilo de su contenido, un componente puramente presentacional. Técnicamente, todavía es un componente React normal y, por lo tanto, crearé un nuevo
archivo aquí en la carpeta de componentes y lo nombraré tarjeta. El nombre depende de usted, pero es esta apariencia típica
de tarjeta, por
lo que me parece un nombre apropiado.
Ahora aquí, como siempre, importa React from React y luego también importa la vista de React Native aquí y luego crea el
componente de la tarjeta, un componente funcional como este que al final exportas por defecto y obviamente ya que se trata de una
presentación aquí, nosotros
Necesitará la hoja de estilo para crear un objeto de estilo porque eso será
lo esencial de este componente, debe
estar allí para envolver cualquier contenido y simplemente aplicar un estilo general.
Ahora, voy a la pantalla de inicio del juego y tomaré todos los estilos aquí del contenedor de entrada,
los copiaré desde allí y los agregaré a la tarjeta. Aquí agregaré una nueva propiedad de tarjeta y
usaré
mis estilos aquí y dentro del componente de la tarjeta,
tendré un marcado muy simple, por así decirlo, un código jsx muy simple.
Es solo una vista que devuelvo aquí, que debería estar envuelta alrededor de accesorios para niños, accesorios para
niños es ese accesorio especial en React que es básicamente el contenido que pasa entre las etiquetas
de apertura y cierre de su componente personalizado. Por lo tanto, puede envolverse alrededor de cualquier contenido porque el
ú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.
Ahora solo hay una cosa, hay ciertos estilos aquí que probablemente no deberían establecerse desde el interior de
la tarjeta,
no todas las tarjetas pueden tener este ancho o ancho máximo y no todas las tarjetas deben centrar su contenido.
Por lo tanto, cortaré estos tres elementos desde allí y solo tendré la sombra y el relleno
configurados aquí y quiero que esto sea un poco más flexible.
Además de los estilos de tarjeta, sería bueno si también pudiéramos asignar nuestros propios estilos desde el
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
todas las propiedades, todos los pares clave-valor de nuestro estilo de cartas aquí en este nuevo objeto.
Este es el operador de propagación, una característica moderna de Javascript que extrae todos los pares clave-valor de un objeto de
ese objeto y lo agrega a un nuevo objeto circundante.
Así que copiamos todos los estilos definidos allí abajo en este nuevo objeto
y estoy haciendo esto para que también pueda agregar otro par clave-valor aquí u otro conjunto de pares clave-valor
donde tomo todos los estilos definidos en los estilos de accesorios, así que en el accesorio de estilo que pasé a mi propio componente
personalizado,
tomo todos los pares clave-valor definidos allí y los combino en este objeto y, como hago esto en segundo
lugar, esto anulará cualquier par clave-valor configurado en la tarjeta de estilos, para que podamos anular cualquier estilo
configurado allí desde afuera cuando usamos nuestro componente y
cuando agregamos estilos adicionales fuera del componente, también lo fusionaremos y lo consideraremos, y con eso también
podemos asignar nuestros propios estilos desde afuera del componente de la tarjeta cuando usamos el componente de la tarjeta y
usar el componente de la tarjeta es algo que tendría sentido como el siguiente paso.
Así que vamos a la pantalla de inicio del juego e importamos la tarjeta desde la carpeta de componentes y
allí desde la carpeta de la tarjeta y reemplazamos nuestra vista del contenedor de entrada aquí con la tarjeta, así, así, con etiquetas
de apertura y cierre.
Ahora, de nuevo, quiero establecer mis propios estilos, quiero establecer mi propio ancho, ancho máximo y alinear elementos,
así que mantendré el contenedor de entrada en la hoja de
estilos allí, pero ahora me deshaceré de todos los otros estilos allí, todos los estilos que ahora están configurados en la tarjeta para
que
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
efecto porque en el componente de la tarjeta, es ese accesorio de estilo el que Me fusiono con mis otros estilos,
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,
el objeto no es
una función cerca de la hoja de estilo React Native.
Entonces en la tarjeta. archivo js como señala aquí, algo está mal, incluso me da el número de línea,
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,
en su lugar
tenemos que llamar a la hoja de estilo . crear para definir nuestros propios estilos, así que esa
es la sintaxis correcta.
Entonces es un error de sintaxis, técnicamente no es un error de sintaxis, pero estoy usando el objeto de hoja de estilo incorrectamente.
Así que es un error de mi parte, el mensaje de error nos ayudó con
eso y ahora tenemos el mismo aspecto que antes, pero tenemos esa tarjeta reutilizable que ahora podemos usar en cualquier lugar donde
queramos tener exactamente este aspecto con las sombras y pronto.