Así que asegurémonos de que nuestros artículos de producto en la pantalla de descripción general del producto se vean un poco
mejor de lo que están buscando actualmente. En este momento, por supuesto, cada artículo del producto
solo se representa como un texto, como un componente de texto y eso no es lo que quiero aquí, en cambio, eliminaré esa importación y
crearé un nuevo componente que debería ser responsable de mi artículo del producto.
Ahora, una nota importante sobre dónde creamos ese componente, podemos crearlo aquí en la Descripción
general de los productos. También en el archivo js, por
supuesto, podemos tener más de un componente por archivo, por lo que aquí podría agregar el componente de mi artículo del producto o
como quiera llamarlo, así, entonces podemos usar este componente en este archivo, que por supuesto lo que planeo hacer
Este es un patrón que puede usar si tiene un componente que está muy vinculado a otro componente y
solo lo está dividiendo para que cada componente sea un poco más legible.
Una vez que estos componentes separados se vuelven muy grandes, aún debería considerar dividirlos en archivos separados para
que sus archivos permanezcan pequeños y si las personas desean ver uno de los dos componentes,
no tienen que desplazarse sobre el otro componente Puede que no les interese.
Eso es una cosa a tener en cuenta. Por supuesto, si también planea usar un componente en
otro componente, siempre debe almacenarlo en un archivo separado, no solo para que pueda exportarlo como predeterminado porque también podría exportarlo
si está almacenado junto con otro componente, esa no es la razón
principal, pero principalmente para dejar en claro que este es un componente independiente que podría y será utilizado en
diferentes partes de su aplicación.
Ahora, el elemento del producto aquí no solo no será súper pequeño, lo que por sí solo sería una razón para colocarlo en
un archivo separado, sino que también lo usaré en un componente diferente más adelante o en diferentes lugares
de la aplicación, no solo es relevante a la pantalla de resumen de productos y, por lo tanto, lo agregaré en
la carpeta de componentes y en esa carpeta de componentes, para organizar un poco mis componentes, agregaré una subcarpeta
de la tienda donde quiero colocar todos los componentes que están directamente relacionado con la función de tienda o con
las funciones en general de mi aplicación.
Entonces, allí en la subcarpeta de la tienda, agregaré este ProductItem. js y verás qué otras carpetas
agregaré aquí más adelante.
Ahora, de nuevo, todos estos patrones y prácticas que le estoy mostrando aquí son solo posibles formas de hacerlo, en
general en mis cursos y también en este curso, le muestro todas las mejores prácticas que puede usar, pero a menudo
en la programación, no hay solo una forma
correcta o incorrecta, por lo que las prácticas y los patrones que estoy mostrando aquí son prácticas y patrones que
verá en otros proyectos también, pero también puede ver otras estructuras de carpetas, al final siempre puede trabajar
con la estructura que funciona para ti, no hay una elección correcta o incorrecta aquí, solo quiero explicarte mi razonamiento para usar esta
estructura que espero te ayude a entender por qué la uso y por qué vale la pena pensarlo.
Así que aquí, el archivo del elemento del producto, el ProductItem. Por supuesto, el archivo js contendrá el componente del elemento del producto, que es un
componente funcional normal que recibe accesorios y al final devolverá el código jsx y, por lo tanto,
dado que contiene el código jsx, debemos importar React from React y aquí, también importo cosas de React Native porque aquí ahora
trabajaré con estas primitivas React Native para construir realmente mi componente porque a partir de ahí, necesitaré la vista, necesitaré el texto, también
quiero usar la imagen porque ' Mostraremos la imagen del producto aquí y también
la hoja de estilo porque definitivamente también le daremos un estilo. Por lo tanto, también puede agregar una constante de estilos aquí
que creamos con la hoja de estilo. creamos a los que pasamos un objeto Javascript
y, al final, exportamos este artículo del producto aquí por defecto, por supuesto. Ahora aquí, en este componente, quiero decir, podemos comenzar a
crear el código jsx que constituye el artículo del producto y este será un componente de
presentación, lo que significa que no habrá lógica aquí, no gestionaremos ningún estado interno, este solo
será un componente que podemos usar en otros componentes para obtener el estilo y el
diseño correctos de la caja, por lo que este componente será responsable de usar ciertos componentes React
Native y diseñarlos y diseñarlos de cierta manera. Entonces, aquí, al final quiero devolver una vista
que envuelve todo, que organiza todo, que también podemos diseñar para que este carro
se vea con quizás una sombra paralela, tal vez esquinas redondeadas, lo que quieras y allí, ahora tiene diferentes
partes, por ejemplo, definitivamente tendremos la imagen allí, la imagen del producto, también quiero tener el título y el precio,
por lo que necesitaremos un texto aquí,
así que para el título aquí y aquí, entonces por el precio en dólares y por debajo de eso, también quiero tener una vista con botones,
por lo que aquí podemos usar
el componente de botón incorporado por el momento, donde luego podemos agregar un producto al carrito
o también ver los detalles , entonces, básicamente, donde tenemos estas dos opciones y, por supuesto, tendremos que
agregar controladores onPress aquí. Ese es el esqueleto muy básico, probablemente
no el último, tendremos que ver cómo podemos diseñar todo aquí, pero ese es
el diseño que quiero.
Por cierto, envuelvo mis botones aquí porque quiero tenerlos uno al lado del otro en la fila y
al tener una vista a su alrededor, podemos diseñar esa vista de modo que use la fila de dirección flexible
y así sucesivamente.
Entonces, esa
es una configuración con la
que podemos trabajar aquí, ahora agreguemos
un poco de estilo y para eso quiero usar o
comenzar aquí en la vista circundante donde configuro productos de estilos como este, por lo
tanto, aquí en la hoja de estilos, agrego productos como
ese, agregue mi clave de producto aquí y,
por supuesto, de nuevo, depende totalmente de usted cómo desea diseñar esto, quiero tener esa apariencia de tarjeta, por lo tanto, agregaré una sombra, un color de
sombra que puede ser negro, una opacidad de sombra que puede ser 0. 26, un desplazamiento de sombra donde tengo el desplazamiento de ancho de cero y
un desplazamiento de altura de dos y un radio de sombra de ocho
quizás y, como siempre, juegue con estos valores para encontrar su configuración.
Ahora puede que recuerde que shadow solo funciona en
iOS, por lo que para Android agregaré la propiedad de elevación aquí y estableceré esto en cinco quizás, nuevamente, también
puede experimentar con diferentes valores allí y
quiero tener un radio de borde de 10 porque Quiero esquinas redondeadas y
de nuevo, eso es
algo que quiero aquí, algo que no tienes que hacer. También agregaré un color de fondo blanco para asegurarme de
que nuestro carrito aquí, nuestro producto siempre tenga este color de fondo, incluso si nuestra aplicación principal
debe usar un color de fondo diferente más adelante. Así que ese es mi producto, mi envoltura aquí alrededor del producto completo. Además, también quiero configurar mi altura aquí, cada
producto debe tener una altura de 300
píxeles y, por supuesto, ese es un valor que también puede ajustar a
sus necesidades.
Por supuesto, también podría hacer esta dinámica con las dimensiones API como lo aprendió en
el módulo receptivo y agregaré un margen de 20 en todas las direcciones alrededor de cada elemento del producto,
para que tengamos un espacio en todas las direcciones. Con esta configuración, podemos comenzar a trabajar en la salida de algo,
por lo que la imagen necesita una fuente y obtendremos una imagen de red aquí porque si echa
un vistazo a los datos ficticios, todas estas URL de imágenes aquí son URL, eso también es lo que tenemos
en el modelo, esperamos
una URL aquí, por lo que para una imagen de red y eso sería el valor predeterminado, por supuesto,
para cualquier tienda que construya porque nunca incluirá todas las imágenes del producto en su aplicación, al menos si no es algo en tienda de aplicaciones
para un juego, pero si es una tienda
donde las personas pueden crear productos, obviamente las personas crearán productos dinámicamente después de que se distribuyó su
aplicación, por lo que es imposible que incluya todas las imágenes en su aplicación, sino que deben almacenarse en un servidor .
Por lo tanto, aquí, debemos pasar un objeto a la fuente donde configuramos la propiedad URI y
que ahora se recibirá desde afuera porque este componente del artículo del producto es presentacional, por
lo que cualquier información para mostrar debe pasar a través de accesorios y allí, podría esperar el accesorio de
imagen, pero en cuanto a todos los
accesorios en sus propios componentes, puede elegir los nombres que desee. Para el título, espero obtener un accesorio de título y por el precio, espero obtener
un accesorio de precio, por cierto, mantendré el signo de dólar aquí porque el precio será solo un número y, por supuesto,
quiero tener un signo de dólar en frente de esto.
Ahora, una pequeña nota aquí, quiero asegurarme de que el precio que obtengo siempre tenga exactamente dos decimales y podemos
lograrlo llamando a fijo en esto y pasando un dos. Fijar es una función disponible en
números en Javascript, que convierte esto básicamente en una cadena con una cantidad fija
de decimales y aquí restrinjo que siempre
sean dos
decimales, eso es Javascript normal, nada específico para React Native. Ahora, cuando presionamos el botón de ver detalles, activaré accesorios en los detalles de la vista, así
que nuevamente uso un nombre aquí que puedes configurar o nombrar como quieras, pero la idea aquí es que los accesorios en los
puntos de detalles de la vista en una función que en el final se ejecuta
cuando se presiona este botón y, por lo tanto, aquí, si
se presiona este botón, se presiona el botón del carrito, señalaré una función que espero obtener en el accesorio para agregar al carrito.
Una
vez más, puede nombrar estos accesorios como desee, pero cuando use su componente,
debe asegurarse de que estén disponibles y de que obtengan valores que son funciones que luego se activan a través de estos botones.
Ahora estamos obteniendo todos los datos. Ahora para la imagen, dado
que esta es una imagen de red, necesitamos configurar el ancho y la altura porque la imagen no puede ver eso de
antemano, ya que podría hacerlo para una imagen local, no
puede hacerlo para una red imagen, así que aquí señalaré estilos. imagen y agregaré esta clave de imagen a mi hoja de estilo allí por ahora.
Una vez más, generalmente depende de usted cómo diseñe esto, pero configuraré esto para que tenga un ancho de
digamos 60%,
tenga en cuenta que el producto general tiene un ancho de 100% pero una altura de 60% porque el producto general el elemento aquí tiene
una altura de 300 y quiero tener la imagen allí, que también debería ocupar la mayor parte de la altura,
pero también tengo el título y el precio y mis botones y estos también deberían encajar allí, así
que ' Le daré a
la imagen el 60% de la altura
para que las otras cosas aquí puedan dividir el 40% restante entre ellas. Entonces, con eso, esa es la imagen, ahora, por supuesto,
la imagen no es todo lo que tenemos aquí, también tenemos nuestro título, tenemos nuestro
precio y también quiero darle estilo.
Entonces, para el título, agregaré el estilo del título aquí y por el precio, agregaré, digamos, un estilo
de precio y aquí para estos botones, también agregaré un estilo a la vista circundante y nombraré esto acciones y, por
supuesto, todos estos nombres de estilo como siempre son totalmente suyos. Aquí, quiero agregar mi título
y el precio y la propiedad de acciones a mi hoja de estilo aquí y ahora para el título, por supuesto,
puede diseñar esto de la forma que desee.
No tenemos fuentes personalizadas aquí, agregaré
algunas pronto, pero por el momento, lo ignoraré y comenzaré
con un tamaño de fuente de 18 y quiero agregar un margen vertical, así que arriba y abajo de 3
o 4, entonces un margen muy pequeño pero todavía algo de margen alrededor de este título. Por el precio, estableceré un tamaño de fuente de 14,
un poco más pequeño y también le daré un color que debería ser 888, que es
como un color grisáceo grisáceo oscuro.
Ahora las acciones se colocan en esa vista que contiene los botones y, por lo tanto, quiero asegurarme de que el botón se
encuentre uno al lado del otro, así que en una fila.
Así que le daré una dirección de fila flexible aquí y también justificaré el contenido para tener todo el espacio restante entre ellos y, además,
quiero alinear los elementos en el centro verticalmente, de modo que a lo largo del eje transversal que para una
dirección flexible de fila es el eje vertical.
Con eso, tenemos un estilo básico, ahora
usemos ese componente antes de refinar la configuración y el estilo. Entonces, el componente del artículo del producto que exportamos
aquí en el archivo del artículo del producto ahora se puede usar en el archivo
de resumen del producto importando el artículo
del producto desde allí, así que señalemos nuestra carpeta de componentes, allí en la subcarpeta de la tienda y luego
el artículo del producto y ahora esto es lo que quiero usar aquí cuando renderizo mis artículos.
El artículo del producto puede ser un componente de cierre automático porque todos los datos se reciben a través de accesorios
y no entre las etiquetas de apertura y cierre,
ahora, por supuesto, tenemos que configurar todo lo que esperamos aquí.
Esperamos una imagen, el título, el precio y nuestros dos accesorios de manejo de eventos aquí, así que
eso es lo que necesitamos proporcionar ahora.
Por lo tanto, aquí en el artículo del
producto, comenzaré con la imagen y, por supuesto, es itemData. articulo. imageUrl y
siempre debes recordar ese itemData. el elemento señala como un producto tal como se define en nuestro modelo de producto
y, por lo tanto, tendrá una propiedad imageUrl escrita de esta manera, si la
escribió de manera diferente, por supuesto, debe acceder a ella de manera diferente. Además de la imagen, también tendremos
un título que es itemData. articulo. título y además de eso, tendremos el precio
con itemData. articulo. precio
y luego tenemos nuestros dos controladores de eventos aquí porque tenemos el accesorio de detalle de vista y
el accesorio de agregar al carrito que necesitamos agregar. Entonces, ver los detalles hará algo más tarde, por ahora es
solo una función vacía y al agregar al carrito también hará algo
más tarde, por ahora también puede ser una
función vacía, así es como se debe representar nuestro artículo del producto. Con eso, si guardamos esto, esto es
lo que debería ver, aún no es perfecto, pero
estamos llegando allí, esto no es tan malo en realidad.
Ahora, por supuesto, lo que observa es que los botones están coloreados de manera incorrecta, que este espacio
no se usa realmente de la manera en que debería usarse allí, que tal vez también
queramos centrar este texto, pero estas son, por supuesto, cosas podemos trabajar Entonces, para refinar esto, nuevamente en el componente del artículo del producto
aquí, comencemos con nuestros dos textos aquí.
Por supuesto, deben estar centrados y eso se puede hacer de una manera muy simple envolviendo eso con
una vista, moviendo estos dos textos allí, dándole a esa vista un estilo y, por supuesto,
puede nombrar esto
como quiera, lo nombraré detalla porque diseñamos los detalles del producto allí, así
que agregaré mi estilo de detalles aquí a la hoja de estilos y allí, solo estableceré el centro de elementos de alineación.
Esto usa una dirección de columna flexible, la predeterminada y, por lo tanto, se centra en el eje transversal, siempre hace esto, pero
el eje transversal para la columna de dirección flexible es, por supuesto, de
izquierda a derecha, por lo que se centra horizontalmente, que es lo que quiero aquí y yo ' También le daré una altura del 15%.
Tenga en cuenta que la imagen toma el 60%, por lo que le damos
a esto tal vez el 15%, por lo que casi la mitad del 40% restante, no
la mitad, y agregaré un poco de relleno aquí de 10 tal vez.
Y para los botones aquí, estos están en mi propiedad de acciones, allí quiero establecer
la altura al 25% restante, eso debería ser una cadena,
por supuesto, porque tenemos 60% de altura aquí, luego tenemos
15% aquí, por
lo tanto aquí Quiero mantener el 25% restante y si ahora guardamos esto, se verá mucho mejor.
Ahora, un poco de relleno a la izquierda y a la derecha también sería
bueno para los botones, por lo que en esta propiedad de estilo de acciones, agregaré un relleno horizontal de 20 tal vez, para que tengamos un espacio interno hacia
la izquierda o hacia la derecha. Ahora para cambiar el color
de los botones, podemos ir a los componentes del botón que están integrados en
React Native y configurar
el accesorio de color aquí en colores que, por lo tanto, debe importar desde la carpeta de
constantes y desde
el archivo de colores allí y configurar esto luego a los colores primarios, también aquí para el segundo color, el botón agregar al carrito, el segundo botón por lo tanto.
Así que ahora tenemos nuestros
botones aquí, agregue al carrito y vea los detalles y esto no se ve tan mal.
Lo único que puede notar es que no tenemos esquinas redondeadas aquí en la parte superior
y la razón es que nuestra imagen básicamente es como una superposición a nuestro fondo y el fondo es la vista
circundante, la imagen
no tiene esquinas redondeadas y, por lo tanto, se superpone a nuestras esquinas redondeadas
que tenemos en la vista circundante. Para solucionarlo, podemos ajustar la imagen
en una vista separada y, como mencioné anteriormente en el curso, es
realmente normal en React Native tener un par de vistas anidadas porque a
esta vista, ahora podemos adjuntar un estilo que tal vez podamos dar un identificador de contenedor de imagen que ahora podemos agregar a nuestra hoja de
estilo y ahora le daré a este contenedor de imagen mi ancho y alto aquí y en la imagen, por
lo tanto, solo agregaré un ancho y alto del 100% porque ahora
está dentro
de el contenedor, esto aquí
se refiere al
padre, por lo que a este contenedor, por lo que
una altura del 60% también se aplicará a la imagen,
pero en ese contenedor de imágenes, ahora podemos agregar un radio de borde superior izquierdo de
10 y un borde superior radio
derecho de 10 para que redondeemos estas esquinas y ahora sea importante, agregue un desbordamiento oculto aquí porque esto garantizará que
cualquier niño allí, que es nuestra imagen, por supuesto, no pueda superponer lo que configuramos aquí.
Así que ahora con esta configuración, agregamos nuestras esquinas redondeadas aquí de nuevo a la parte
superior y ahora estos son los elementos de imagen que quiero aquí y, por supuesto, también es una lista
desplazable en la que también puede ver que estas imágenes se cargan lentamente, lo que puede continuar trabajando con.
Por supuesto, el próximo objetivo podría ser que también podamos ver la pantalla de detalles.