1 00:00:02,360 --> 00:00:08,330 Así que asegurémonos de que podemos ir a la pantalla de edición de productos y, 2 00:00:08,330 --> 00:00:17,550 por supuesto, primero lo llenaré con algo de vida importando React from React y luego también importando algunas cosas de React Native y 3 00:00:17,850 --> 00:00:24,960 estas algunas cosas por el momento incluirá la vista y el texto y también una hoja de 4 00:00:24,960 --> 00:00:26,610 estilo que necesitaremos 5 00:00:26,670 --> 00:00:34,980 más adelante y luego aquí tenemos la pantalla de edición del producto donde obtendré accesorios y tendré que devolver algunos jsx. 6 00:00:34,980 --> 00:00:45,420 Configuré mi objeto de estilos aquí con Stylesheet. crear así y luego podemos exportar la pantalla de 7 00:00:45,450 --> 00:00:49,310 edición del producto como predeterminada. 8 00:00:49,390 --> 00:00:55,030 Ahora, aquí en el componente mismo, por el momento solo para ver que esto 9 00:00:55,030 --> 00:01:01,990 funciona, podemos generar una vista con un texto allí donde decimos que la pantalla de edición del producto 10 00:01:01,990 --> 00:01:07,210 y más tarde, por supuesto, mostraremos más cosas útiles aquí y ahora para 11 00:01:07,270 --> 00:01:12,120 ir allí, nuevamente necesitamos registrar esto en un navegador, es parte del 12 00:01:13,150 --> 00:01:18,940 navegador de administración, así que importaremos esta pantalla, importamos la pantalla de edición de producto 13 00:01:18,940 --> 00:01:29,060 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 14 00:01:29,060 --> 00:01:32,330 a la pantalla de edición del producto. 15 00:01:32,330 --> 00:01:37,250 Ahora deberíamos poder movernos allí en general, pero, por supuesto, ahora necesitamos activar una acción de navegación para 16 00:01:37,250 --> 00:01:42,320 alcanzarlo y eso es algo que quiero hacer desde el interior de la pantalla del producto del usuario cuando 17 00:01:42,560 --> 00:01:46,060 seleccionamos esto o cuando presionamos editar, luego quiero hacer la misma cosa. 18 00:01:46,220 --> 00:01:50,040 Así que volveré a crear una función aquí para no 19 00:01:50,240 --> 00:02:00,170 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 20 00:02:00,200 --> 00:02:01,420 para que 21 00:02:01,460 --> 00:02:11,630 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 22 00:02:11,780 --> 00:02:17,900 la pantalla con este identificador que, por supuesto, tengo porque ese es el identificador que acabo 23 00:02:17,930 --> 00:02:19,330 de registrar aquí 24 00:02:21,370 --> 00:02:24,580 y quiero reenviar la identificación del producto aquí. 25 00:02:25,730 --> 00:02:30,150 Entonces, el ID que obtengo como argumento aquí en la función se reenvía como un parámetro de enrutamiento, 26 00:02:30,200 --> 00:02:33,960 ahora el controlador de producto de edición es la función que debe ejecutarse aquí cuando 27 00:02:33,980 --> 00:02:40,850 hacemos clic en el botón Editar, allí reenvío itemData. articulo. id y hago lo mismo aquí en esto 28 00:02:40,850 --> 00:02:42,790 en el controlador seleccionado, por supuesto. 29 00:02:45,360 --> 00:02:48,400 Si echamos un vistazo a esto, volveremos aquí, 30 00:02:48,510 --> 00:02:53,630 administrador, haga clic aquí, la pantalla de edición del producto, también si hago clic 31 00:02:53,640 --> 00:03:00,030 en el botón de edición, entonces eso está funcionando. Ahora para agregar nuevos productos, quiero ir a la misma 32 00:03:00,080 --> 00:03:05,730 pantalla pero sin pasar una ID y eso nos permitirá saber si estamos en modo de edición o agregar en esa 33 00:03:05,730 --> 00:03:08,940 pantalla de edición de producto verificando si tenemos una ID o no. 34 00:03:08,940 --> 00:03:16,560 Entonces, para ir a esa pantalla de agregar producto, podemos agregar un elemento de acción, por lo que un elemento a la 35 00:03:16,560 --> 00:03:24,280 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í. 36 00:03:25,290 --> 00:03:32,530 Al final, esto es justo lo que configuramos aquí, así que lo copiaré usando los botones de encabezado, pero el 37 00:03:32,530 --> 00:03:40,840 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 38 00:03:40,840 --> 00:03:47,260 punto de crear algo y también aquí, no alterno el cajón, sino que llamo a navegar e 39 00:03:47,260 --> 00:03:53,650 ir a editar producto y ahora, como mencioné importante, sin pasar ningún parámetro aquí porque estamos agregando 40 00:03:53,650 --> 00:03:57,910 un nuevo producto, ciertamente no pasaremos cualquier identificación existente aquí. 41 00:03:58,970 --> 00:04:06,070 Y con eso agregado, por ejemplo, en Android para mezclar cosas en la pantalla de administración, ahora podemos presionar este icono 42 00:04:06,430 --> 00:04:09,540 de barra de acción para ir a la pantalla. 43 00:04:09,710 --> 00:04:14,540 Ahora, por supuesto, aquí falta el encabezado y lo arreglaremos, pero antes de hacerlo, 44 00:04:14,540 --> 00:04:19,120 hay algo más que quiero arreglar, la taza de café está realmente cortada aquí 45 00:04:19,130 --> 00:04:25,220 en iOS, ves que la G está un poco cortada apagado y además de eso, es posible que 46 00:04:25,220 --> 00:04:30,680 haya notado anteriormente que cuando tenía artículos en el carrito y los quito, que antes tenía 47 00:04:31,380 --> 00:04:37,490 un signo negativo aquí, ahora arreglemos ambas cosas. Para la taza de café 48 00:04:37,490 --> 00:04:46,400 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, 49 00:04:46,400 --> 00:04:48,420 como la imagen tenía una 50 00:04:48,550 --> 00:04:56,090 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 51 00:04:56,080 --> 00:05:00,440 título tenga un poco más espacio y esto asegura que la taza de café 52 00:05:00,440 --> 00:05:02,540 esté allí, eso fue una solución simple. 53 00:05:02,540 --> 00:05:05,560 Ahora para el carrito, el problema simplemente es 54 00:05:05,570 --> 00:05:07,910 que detrás de escena cuando se trabaja 55 00:05:07,910 --> 00:05:12,950 con números de coma flotante, Javascript no tiene la precisión que tal vez desearía tener 56 00:05:12,950 --> 00:05:14,630 y así es 57 00:05:14,630 --> 00:05:16,800 como funciona Javascript y, por lo 58 00:05:17,000 --> 00:05:21,910 tanto, si agrega dos elementos y luego los elimina ambos, en realidad puede terminar 59 00:05:21,920 --> 00:05:29,580 con un valor que en algún lugar decimal no es 0. Ahora, lo que puede hacer para arreglar esto 60 00:05:29,580 --> 00:05:39,550 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, 61 00:05:39,610 --> 00:05:47,830 redondear y ajustar esto a un valor fijo aquí y multiplicarlo por 100 y luego, divide esto por 100. 62 00:05:47,850 --> 00:05:50,580 Esto asegurará que nunca termines con este 63 00:05:50,610 --> 00:05:56,420 signo negativo, de nuevo, esto tiene que ver con cómo Javascript maneja internamente estos números de coma flotante. 64 00:05:56,440 --> 00:06:06,210 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 65 00:06:06,210 --> 00:06:07,700 ahora si eliminamos artículos 66 00:06:07,710 --> 00:06:13,170 aquí, siempre deberíamos terminar con un cero como este, nunca con un menos delante de 67 00:06:13,170 --> 00:06:13,740 ella. 68 00:06:13,800 --> 00:06:20,070 Así que eso es solo una pequeña mejora con respecto a cómo generamos esto y con estos ajustes visuales fuera 69 00:06:20,070 --> 00:06:25,470 del camino, volvamos a los productos de usuario y asegurémonos de que ahora podemos llegar a la 70 00:06:25,470 --> 00:06:27,480 pantalla de edición y adición, que 71 00:06:27,480 --> 00:06:34,940 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.