En los artículos del carrito.
Ahora, de nuevo, crearé un componente separado para cada artículo del carrito
que deseo enviar aquí.
Podría hacerlo aquí, pero de nuevo, será un componente un poco más largo y no quiero inflar este archivo con él
y en realidad también lo usaré en otro lugar más tarde, lo que puede sonar
extraño dado que solo tenemos una pantalla de carrito, pero verá dónde más podemos usar
un artículo de carrito más adelante.
Entonces, para eso, volvamos a la carpeta de componentes y allí, quizás en la carpeta de la tienda,
y agreguemos un CartItem. archivo js al lado del artículo del producto.
Ahora, por supuesto, tenemos un componente React normal allí, para que conozcas el
juego, cómo se crean.
Importamos React de React y luego aquí, dado que este es el componente que debería generar algo, importaremos un
montón de componentes de React Native, las primitivas centrales con las que construimos la interfaz de usuario.
Necesitaré una vista, necesitaré un texto, necesitaré una hoja de estilo aquí con seguridad y luego agregaré mi constante aquí, el artículo del carrito
que recibe accesorios y luego al final aquí devuelvo un código jsx. Agregaré mi objeto de estilos aquí
con crear hoja de
estilo y lo exportaré como un artículo de carrito predeterminado.
Ahora, el código jsx que debe devolverse aquí, por supuesto, siempre depende de usted, pero tendré una
vista aquí y en esa vista, quiero generar la cantidad y el título, por supuesto, también la cantidad total para este artículo
del carrito en caso de que agregamos más de uno, entonces este no es solo el precio de un
solo artículo, sino, por supuesto, el precio por la cantidad y en realidad también quiero tener un botón que
me permita eliminar este artículo del
carrito, un ícono de basura.
Así que al final, tendré una fila aquí con un texto y este texto tendrá la cantidad y el título, así que allí
tendré la cantidad y el título y en realidad esto debería tener un estilo diferente, así que envolveré el cantidad aquí en un nodo
de texto separado y hacer lo mismo para el título, de modo que tenga dos nodos
de texto separados aquí al final y luego después de este bloque de texto aquí, debería haber una vista para agrupar otros dos elementos juntos, otra pieza de
texto que es la cantidad total de este elemento aquí, por lo que la cantidad
y al lado de eso, un botón o en realidad no es un botón, sino un ícono pressable.
Así que construiré mi propia cosa táctil con opacidad táctil y, por supuesto, podría
volver a hacer esa diferenciación de plataforma para el efecto dominó, pero iré con opacidad en
ambas plataformas aquí e importaré Ionicons desde @ expo / vector-icons que ya agregamos anteriormente porque quiero tener solo
un ícono
aquí que podamos presionar, así que aquí quiero tener una opacidad táctil y envolverlo
alrededor de un ícono que podamos agregar con Ionicons como agregó anteriormente en este curso, con esto como
un componente aquí y luego simplemente use un nombre que en realidad debería diferir según la plataforma
porque el nombre es el identificador de icono y allí, podemos verificar el sistema operativo de
la plataforma y si ese es Android, entonces el icono que debe usarse tendrá un nombre de md trash y de lo contrario, será la papelera de iOS lo
que representa un buen ícono de papelera y también podemos darle a este ícono un tamaño de digamos 23, que nuevamente
debería verse bastante bien y un color, y aquí, realmente usaré rojo porque está eliminando esto artículo por
lo que debería tener como un warni ng color yo diría. La opacidad táctil cuando se presiona debe hacer algo y debe reenviar el evento
de prensa al componente que usa
el componente del artículo del carrito, por lo que espero obtener un accesorio de eliminación, este nombre como siempre depende
de usted y tiene una función que está en el luego se ejecuta y también podemos agregar un estilo aquí, un estilo muy simple donde apunto al botón Eliminar, por ejemplo, y esa es una
declaración de estilo que podemos agregar a partir de entonces.
Hablando de estilos, por supuesto, hay más estilos
para agregar, por ejemplo, en la vista superior aquí, le daré a este un
estilo de artículo de carrito, este texto aquí
luego recibirá un
estilo de datos de artículo tal vez. Este texto con la cantidad puede recibir un estilo que podemos nombrar estilos. cantidad, de nuevo todos estos
identificadores de estilo como siempre son totalmente suyos.
Aquí en el título, tengo un
estilo de título y luego aquí en esta vista, agregaré un estilo de datos de elemento nuevamente, así que reutilizaré este estilo porque quiero
tener el mismo configurado aquí y esta cantidad aquí será También obtener un estilo de cantidad. Entonces, hay un montón de estilos para agregar, vamos a la hoja
de estilo y allí, agreguemos el artículo
del carrito que es nuestro estilo raíz, luego los
datos y la cantidad del
artículo, así la
cantidad
de datos del artículo, luego el título aquí y la cantidad y por último, pero no menos, el botón Eliminar.
Entonces eso también es algo que tenemos que agregar aquí. Ahora, en el botón Eliminar, eso es simple,
solo agregaré
un margen a la izquierda de 20 para tener un espacio entre el icono y el texto que se encuentra al lado y con
eso,
vamos al artículo del carrito. Ahí, quiero tener un
relleno de 10, un color de fondo blanco, no usaré mi tarjeta mira
aquí, no agregaré una sombra aquí, podrías hacer eso, pero prefiero una apariencia
diferente.
Es importante la fila de dirección flexible para que todos los elementos en esa vista, de modo que este
texto y esta vista estén uno al lado del otro en una misma fila. Justificar el contenido debe ser un espacio intermedio para
que todos los espacios vacíos entre estos dos bloques de contenido y también agregue un margen en dirección horizontal de 20 para que
haya un espacio a la
izquierda y a la derecha alrededor de los artículos de mi carrito.
Ahora, los datos del artículo, ese es el estilo que estamos repitiendo alrededor de la cantidad, el título
y la cantidad, y el botón Eliminar, los datos del artículo deben tener una fila de dirección flexible para asegurarse de que los artículos estén colocados en una fila
y estableceré alinear los artículos aquí centrar para centrar todo el contenido verticalmente. Ahora, para la cantidad aquí, quiero establecer una familia de fuentes
de open-sans, por cierto, también podemos usar una vista aquí en lugar de un texto alrededor de estos dos nodos de texto porque no estoy configurando
ningún estilo de texto específico aquí , así que echemos un vistazo, pero
con eso, volvamos a la cantidad. Podemos dar a esto una
familia de fuentes de sans abierto, un color de tal vez este color grisáceo oscuro que usamos
antes para los precios, ahora para la cantidad y un tamaño de fuente de
16 tal vez y luego aquí para el título, estableceré un familia de fuentes de abierto sin negrita para poner
ese negrita, aunque también le doy un tamaño de fuente de 16 y en la cantidad aquí, haré exactamente lo mismo.
Por lo tanto, por supuesto, también podríamos combinar esto en un mismo estilo, tal vez nombrar este texto principal o algo así, deshacernos
de la
cantidad ya que tenemos exactamente las mismas definiciones de estilo y ahora usar el texto principal aquí en lugar del
título y aquí en su lugar de cantidad.
Bueno.
Este es un
artículo del carrito, ahora usémoslo en la
pantalla del carrito con la ayuda de una
lista plana allí porque en este momento no estamos mostrando ningún artículo allí en la pantalla del carrito.
Entonces, esta vista aquí se puede reemplazar con una lista
plana ahora y los datos que tenemos allí deben ser una variedad de artículos de carrito y eso es exactamente lo que
tenemos aquí en los artículos
de carrito constantes, así que usemos esto aquí.
Ahora
aquí, también agregaré un extractor de claves y aquí definitivamente debe agregarlo para que React Native sepa dónde
se puede encontrar su clave porque cada elemento aquí al final es de este formato y no tiene una
clave ni un Propiedad de ID, pero sabemos que la ID de producto se puede usar como clave porque
será única para cada artículo.
Así que aquí, apunto al artículo. productId al final y ahora para
el artículo de renderizado, quiero usar este artículo del carrito que acabamos de agregar.
Entonces, aquí, necesitamos importar el artículo del carrito de la carpeta de componentes, la carpeta de la tienda y allí, el artículo del carrito y luego usar este
componente del artículo del carrito allí abajo en nuestra función de representación, donde obtenemos los datos de nuestro artículo
al final y donde luego devolvemos nuestro artículo de carrito como este y ahora en el artículo de carrito, necesitamos pasar algunos
datos, ¿verdad? En el artículo
del carrito, en este momento tengo marcadores de posición ficticios, por supuesto, aquí espero obtener mi cantidad, digamos en una cantidad con
nombre de accesorio, espero obtener mi título en tal vez un título con nombre de accesorio y la cantidad en una cantidad con nombre de accesorio y
allí, llamaré a fixed to 2 para asegurarme de que siempre tengamos dos lugares decimales allí y también tengamos
el accesorio on remove que esperamos sea correcto.
Entonces obtuvimos cantidad, título, cantidad y al eliminar, así que de vuelta en la pantalla del carrito, eso
es lo que tenemos que agregar, la cantidad es, por supuesto, itemData. articulo. cantidad porque un solo artículo
aquí es, por supuesto, un artículo así y, por lo tanto,
tendremos un mantenimiento de la cantidad y, además de la cantidad, tenemos que pasar el título, la cantidad
y al eliminar.
Entonces el título es, por supuesto, itemData. articulo. producto. título, ese es el nombre
que elegí allí, por la cantidad que podemos pasar en itemData. articulo. Si echamos un vistazo a cómo
definimos nuestros datos, esa sería la suma, esa es la cantidad para un artículo, sin importar la cantidad que
tengamos allí o respetando la cantidad que tenemos en realidad.
Y luego, por último, pero no menos importante, para eliminar, debemos señalar una función y, por el momento, no tenemos lógica para esto, por lo que
solo señalaré una
función vacía y ahora es un artículo de carrito como quiero representar eso.
Intentemos esto. Agreguemos dos camisas rojas y una alfombra azul, vaya al carrito y ahora tengo
cadenas de texto que deben representarse dentro de un componente de texto y apunta al elemento del carrito, línea 14, así
que echemos un vistazo a eso,
sí, es aquí que mi IDE agregó automáticamente, este espacio en blanco que quiero tener aquí después
de mi cantidad. De hecho, quiero tener eso
aquí, así que solo agregaré un espacio en blanco adicional antes de cerrar mi texto. Ahora con eso, intentemos esto nuevamente, dos
camisas rojas, una alfombra azul.
Vea la cantidad aquí,
vea el título aquí, vea la
suma y, por supuesto, esto también se suma a esta suma total.
Ahora es el momento de hacer que este botón de eliminar funcione.