Ahora que tenemos el flujo básico hacia abajo, que podemos navegar entre nuestros productos, agregarlos al carrito y luego
también usar el carrito para hacer un pedido y también ver ese pedido y, por supuesto, también
editar el carrito
si quisiéramos, ahora que todo está hecho, es hora de avanzar hacia la última parte de esta
aplicación, que es, por supuesto, la parte donde puede agregar nuevos productos.
Ahora, esa es también la parte que refinaremos más adelante porque más tarde, por supuesto, profundizaremos en el manejo de la entrada del
usuario e incluso almacenaremos esos datos en un servidor, pero ya podemos comenzar aquí. Para comenzar, la pantalla del producto del usuario y
la pantalla
de edición del producto se volverán importantes ahora porque estas son las
pantallas donde vemos todos nuestros productos y donde también podemos editar los productos.
Entonces, comencemos con la pantalla de
productos del usuario y conviértalo en un componente React importando
React from React y, como era de esperar, importando cosas de React Native. Lo que quiero importar aquí es la lista plana nuevamente porque
al final mostraré una lista de productos en la pantalla de
productos de este usuario.
Por lo tanto, aquí tenemos el componente de pantalla de productos de usuario que recibe accesorios
y donde luego necesito devolver algunos jsx y, al final del archivo, exportaré este componente por defecto.
Esa es mi configuración predeterminada de componentes que utilicé una y otra vez. Ahora aquí, quiero generar mis
componentes, mis productos con una lista plana y reutilizaré ese componente de producto
que construimos anteriormente.
Entonces, de vuelta en los productos de usuario, podemos importar
el artículo del producto desde la carpeta de componentes, así que
vamos allí y allá, para comprar y luego ordenar, no ordenar sino el artículo del producto y
aquí, por supuesto, también ingresamos algunos datos. Ahora los datos que quiero transmitir aquí deben ser
los productos que pertenecían a mi usuario conectado.
No tenemos un usuario conectado en este momento, pero si recuerda el reductor de productos, estamos fingiendo que
tenemos porque allí tenemos esa matriz de productos de usuario que contiene todos los productos que en este caso aquí
tienen una identificación de usuario, una identificación de propietario de U1 y supongo por el momento tener algunos datos ficticios de que estos son nuestros datos
de usuario actualmente conectados, luego, por supuesto, esto será dinámico. Entonces, el producto de usuario es lo que
necesitamos, de vuelta en la pantalla de productos de usuario, por lo tanto, necesitamos
obtener esos datos de Redux con la ayuda del selector de uso de React Redux, así
y aquí obtenemos nuestros productos de usuario llamando al selector de uso donde pasamos en esa función, obtiene el estado, luego llega a la parte de productos
de los productos de nuestra tienda porque ese es el identificador que uso allí y luego,
como acabo de decir, acceda a este campo de productos de usuario aquí, así que en la pantalla de
productos de usuario, aquí acceso. productos de usuario. Los productos de usuario ahora son la matriz
que alimentamos en los datos, como siempre aquí agregaré un extractor de claves que me da la identificación porque mi producto tal como está almacenado
aquí en productos de usuario utiliza, por supuesto, mi modelo de producto al final y, por
lo tanto, tiene una identificación que es un identificador único que puedo usar, así que lo usaré y, por supuesto, como
siempre, también necesitamos agregar un elemento de representación, obviamente ya conoces ese patrón. Renderizar artículo obtiene los datos del artículo aquí y quiero devolver un nuevo
artículo de producto para cada entrada aquí y el artículo del producto, si lo miramos, toma un par de datos.
Aquí se necesita un accesorio de detalle a la vista, se necesita un accesorio de título, un accesorio de precio, un accesorio de imagen y luego también un accesorio de
agregar al carrito.
Ahora es posible que ya vea que no todos estos accesorios realmente se ajustan a nuestro propósito si lo
usamos en la pantalla del producto del usuario porque esta no será una pantalla en la que podamos comprar productos, esta
no es una pantalla donde quiero poder agregar productos a un carrito. Quiero mostrarlos como hago aquí con la imagen, el precio, etc., pero
no me importa mucho si podemos hacer clic en ellos o en estos botones. Así que comenzaré a agregar el artículo
del producto de esta manera, pero tendremos que ajustarlo.
Entonces, lo que necesitamos es título, precio, imagen y ver detalles y agregar carrito.
Entonces, necesitamos la imagen aquí y, por supuesto, es itemData. articulo. imageUrl porque no
debes olvidar ese itemData. El elemento en los puntos finales en un
producto como se define aquí en el modelo, por lo tanto, tendremos esta propiedad imageUrl y luego aquí también necesitamos el título al que se puede acceder
a través de itemData. articulo. título. Necesitamos el precio al que se puede acceder con itemData. articulo. precio y si echamos un
vistazo al componente del artículo del producto, eso cumple con todo lo que necesitamos aquí, pero
ahora necesitamos ver los detalles y agregarlos al carrito y los agregaré temporalmente, pero tendremos que encontrar una solución diferente
aquí.
Por lo tanto, ver detalles es una función
vacía en este momento y al agregar al carrito, también está vacía y lo implementaremos de manera diferente más adelante.
Por el momento, sin embargo, estoy enviando un artículo de producto aquí y, por lo tanto,
ahora podemos navegar a la pantalla de productos del usuario. Para llegar allí, es hora de volver al navegador de la tienda y, al
final, quiero agregarlos a mi navegador de cajones, pero como una pila separada, al igual que los productos y pedidos son una pila
separada, esta también debería ser una pila separada .
Podemos simplemente copiar la pila del navegador de pedidos aquí, replicar esto e importar la pantalla del producto del usuario aquí, de modo
que
la pantalla de los productos del usuario desde la carpeta de pantallas, allí desde la carpeta del usuario y luego la pantalla
del producto del usuario y mapear esto en la pila recién copiada. No nombraré el navegador de pedidos porque ya tengo
ese nombre aquí, pero lo nombraré, digamos, quizás el navegador de administración y aquí, tengo mi identificador de productos
de usuario que apunta a la pantalla de productos de usuario. Ahora aquí como un ícono, en el cajón
quiero tener un md create e ios create icon y, aparte de eso, esto debería estar bien.
Ahora solo necesitamos agregar este navegador a nuestro navegador de cajones.
Allí agregaré la clave de administrador y apuntaré al navegador de administración, por lo que
ahora deberíamos poder llegar a eso. Si volvemos a la aplicación, tenemos la entrada de
administrador y si hago clic en ella, tenemos un problema con respecto a mis productos
de usuario, el estado indefinido no es un objeto, echemos un vistazo rápido a la pantalla del producto
de usuario, sí, eso debería sean productos porque nuestro segmento se denomina productos aquí en el reductor combinado.
Así que aquí también debería
haber productos, un pequeño error tipográfico de mi parte. Ahora esto se ve mejor y ahora, puede parecer que nada ha
cambiado, pero en realidad, puedes ver que mis elementos de navegación se han ido porque ahora estoy en una nueva pantalla pero tengo mi
lista anterior aquí pero con menos productos.
Si compara Android donde estoy en la pantalla de inicio, tenemos más productos allí, ahora
solo tengo aquellos donde U1 es la identificación del propietario.
Eso es
bueno, pero por supuesto no me gustan estos botones aquí y
también quiero tener un elemento de menú aquí y un título de encabezado, por supuesto.
Hay algunas cosas que debemos arreglar, por supuesto, estos botones son lo más importante o
lo más llamativo que está mal. Aún así, comenzaré con el
encabezado, en la pantalla de productos de usuario
aquí, podemos agregar las opciones de navegación, pantalla de productos de usuario. opciones de navegación y allí, establezca un título de encabezado
de sus productos, por ejemplo, y también necesitamos el botón de menú, por lo que también podemos ir a la pantalla de descripción general del
producto y desde allí, copiar esta parte izquierda del encabezado aquí, volver a la pantalla
del producto del usuario y agrega esto aquí.
Ahora, sin embargo, necesitamos esa forma de función de las opciones de navegación donde al final devolvemos
un objeto con todas las opciones allí, así que es algo que debemos cambiar de esta manera y
también debemos asegurarnos de importar el elemento de los botones de encabezado y botón de encabezado
Entonces, de vuelta en la pantalla de resumen del producto, aquí tengo estas
importaciones aquí, cópielas de la pantalla de resumen del
producto, vaya a la pantalla del producto
del usuario y agréguelas allí, por ejemplo, para que
importe todo lo que necesita.
También necesitamos importar una API de plataforma porque también la estamos usando al configurar los botones de encabezado.
Ahora al menos, cuando vamos al área de administración, tenemos nuestro título aquí, tenemos el cajón, el botón de menú
nuevamente, pero
¿qué pasa con estos botones aquí?
Tendremos que cambiar la apariencia de nuestro producto.