Así que asegurémonos de que podemos ir a la pantalla de edición de productos y,
por supuesto, primero lo llenaré con algo de vida importando React from React y luego también importando algunas cosas de React Native y
estas algunas cosas por el momento incluirá la vista y el texto y también una hoja de
estilo que necesitaremos
más adelante y luego aquí tenemos la pantalla de edición del producto donde obtendré accesorios y tendré que devolver algunos jsx.
Configuré mi objeto de estilos aquí con Stylesheet. crear así y luego podemos exportar la pantalla de
edición del producto como predeterminada.
Ahora, aquí en el componente mismo, por el momento solo para ver que esto
funciona, podemos generar una vista con un texto allí donde decimos que la pantalla de edición del producto
y más tarde, por supuesto, mostraremos más cosas útiles aquí y ahora para
ir allí, nuevamente necesitamos registrar esto en un navegador, es parte del
navegador de administración, así que importaremos esta pantalla, importamos la pantalla de edición de producto
desde la pantalla de edición de usuario y luego la agreguemos aquí al navegador de administración, tal vez con edite el producto como un identificador, apunte
a la pantalla de edición del producto.
Ahora deberíamos poder movernos allí en general, pero, por supuesto, ahora necesitamos activar una acción de navegación para
alcanzarlo y eso es algo que quiero hacer desde el interior de la pantalla del producto del usuario cuando
seleccionamos esto o cuando presionamos editar, luego quiero hacer la misma cosa.
Así que volveré a crear una función aquí para no
duplicar mi código, seleccionar el producto o editar el controlador del producto, esta es una función en la que espero obtener la ID que quiero editar
para que
la ID del producto que quiero para editar y aquí, quiero usar la navegación de accesorios, navegar a la pantalla de edición del producto, así que a
la pantalla con este identificador que, por supuesto, tengo porque ese es el identificador que acabo
de registrar aquí
y quiero reenviar la identificación del producto aquí.
Entonces, el ID que obtengo como argumento aquí en la función se reenvía como un parámetro de enrutamiento,
ahora el controlador de producto de edición es la función que debe ejecutarse aquí cuando
hacemos clic en el botón Editar, allí reenvío itemData. articulo. id y hago lo mismo aquí en esto
en el controlador seleccionado, por supuesto.
Si echamos un vistazo a esto, volveremos aquí,
administrador, haga clic aquí, la pantalla de edición del producto, también si hago clic
en el botón de edición, entonces eso está funcionando. Ahora para agregar nuevos productos, quiero ir a la misma
pantalla pero sin pasar una ID y eso nos permitirá saber si estamos en modo de edición o agregar en esa
pantalla de edición de producto verificando si tenemos una ID o no.
Entonces, para ir a esa pantalla de agregar producto, podemos agregar un elemento de acción, por lo que un elemento a la
barra de encabezado aquí en la pantalla de producto del usuario y que debería estar a la derecha, así que agregaré el encabezado aquí.
Al final, esto es justo lo que configuramos aquí, así que lo copiaré usando los botones de encabezado, pero el
identificador aquí podría agregarse y el ícono debería ser md create e ios create para tener ese ícono que indique que estamos a
punto de crear algo y también aquí, no alterno el cajón, sino que llamo a navegar e
ir a editar producto y ahora, como mencioné importante, sin pasar ningún parámetro aquí porque estamos agregando
un nuevo producto, ciertamente no pasaremos cualquier identificación existente aquí.
Y con eso agregado, por ejemplo, en Android para mezclar cosas en la pantalla de administración, ahora podemos presionar este icono
de barra de acción para ir a la pantalla.
Ahora, por supuesto, aquí falta el encabezado y lo arreglaremos, pero antes de hacerlo,
hay algo más que quiero arreglar, la taza de café está realmente cortada aquí
en iOS, ves que la G está un poco cortada apagado y además de eso, es posible que
haya notado anteriormente que cuando tenía artículos en el carrito y los quito, que antes tenía
un signo negativo aquí, ahora arreglemos ambas cosas. Para la taza de café
o para cortar el texto, la razón es simple. En el componente del elemento del producto aquí, asignamos la altura a nuestros diferentes elementos,
como la imagen tenía una
altura del 60%, los detalles tenían 15, demos esos 17 y, por lo tanto, deduzcamos dos puntos porcentuales de las acciones para que el
título tenga un poco más espacio y esto asegura que la taza de café
esté allí, eso fue una solución simple.
Ahora para el carrito, el problema simplemente es
que detrás de escena cuando se trabaja
con números de coma flotante, Javascript no tiene la precisión que tal vez desearía tener
y así es
como funciona Javascript y, por lo
tanto, si agrega dos elementos y luego los elimina ambos, en realidad puede terminar
con un valor que en algún lugar decimal no es 0. Ahora, lo que puede hacer para arreglar esto
en la pantalla del carrito es aquí cuando genera la cantidad con fijo, en realidad puede usar las matemáticas que están integradas en Javascript,
redondear y ajustar esto a un valor fijo aquí y multiplicarlo por 100 y luego, divide esto por 100.
Esto asegurará que nunca termines con este
signo negativo, de nuevo, esto tiene que ver con cómo Javascript maneja internamente estos números de coma flotante.
Entonces, si nuevamente agregamos un par de artículos aquí y los agregamos al carrito, esto generalmente se ve bien, por lo que nuestra lógica aún funciona, pero
ahora si eliminamos artículos
aquí, siempre deberíamos terminar con un cero como este, nunca con un menos delante de
ella.
Así que eso es solo una pequeña mejora con respecto a cómo generamos esto y con estos ajustes visuales fuera
del camino, volvamos a los productos de usuario y asegurémonos de que ahora podemos llegar a la
pantalla de edición y adición, que
es la misma pantalla de Por supuesto, también mostramos algunas entradas allí y cargamos algunos datos para un producto que deberían editarse si corresponde.