1 00:00:02,190 --> 00:00:05,630 Trabajemos en la pantalla de pedidos antes de agregar la navegación, 2 00:00:05,670 --> 00:00:07,920 no necesitamos terminarla, pero quiero poder verla. 3 00:00:08,700 --> 00:00:15,300 Entonces, importo React de React para poder construir un componente React válido, importar algo de React Native como siempre 4 00:00:15,300 --> 00:00:20,060 y ese algo también es a lo que estamos bastante acostumbrados, ¿verdad? 5 00:00:20,060 --> 00:00:21,810 Nunca es tan sorprendente. 6 00:00:21,840 --> 00:00:23,050 Necesitaremos 7 00:00:23,370 --> 00:00:32,880 una vista, probablemente necesitaremos una lista plana porque posiblemente tengamos múltiples pedidos, una cantidad infinita 8 00:00:32,880 --> 00:00:43,670 y quiero poder representar eso y con eso aquí, podemos construir nuestra pantalla de pedidos de esta manera. 9 00:00:43,790 --> 00:00:53,710 También exportaré esto, por supuesto, y el estilo realmente no debería ser necesario aquí, en realidad ni siquiera deberíamos necesitar la vista aquí 10 00:00:53,770 --> 00:01:01,570 porque solo quiero generar mi lista de pedidos. Por supuesto, los datos que necesitamos aquí vendrán de 11 00:01:01,720 --> 00:01:04,350 Redux, por lo que deberíamos importar 12 00:01:04,360 --> 00:01:10,600 el selector de uso de React Redux, que nos permite acceder a la tienda de Redux. 13 00:01:11,350 --> 00:01:19,330 Entonces, aquí, podemos obtener nuestros pedidos con la ayuda de usar selector y usar selector ahora apunta al estado. órdenes y, por supuesto, ese es el identificador que asigné 14 00:01:19,390 --> 00:01:25,740 aquí en las órdenes de reductores combinados aquí, esto nos da acceso al segmento de estado 15 00:01:25,810 --> 00:01:29,680 administrado por el reductor de órdenes y allí, tenemos 16 00:01:29,680 --> 00:01:34,040 otra propiedad de órdenes que contiene la matriz real de órdenes. 17 00:01:34,060 --> 00:01:37,860 Entonces aquí necesito acceder al estado. pedidos. órdenes al final, 18 00:01:37,870 --> 00:01:41,070 eso me da mis órdenes que están almacenadas en Redux. 19 00:01:41,110 --> 00:01:48,640 Ahora aquí, solo necesitamos devolver nuestra lista plana y esto recibe órdenes que deberían ser 20 00:01:48,640 --> 00:01:56,640 una matriz y que son como datos. Ahora no se requiere un extractor de claves en las versiones más nuevas de React 21 00:01:56,640 --> 00:02:01,520 Native porque cada pedido si observa el modelo tiene una ID y las versiones más nuevas de React 22 00:02:02,010 --> 00:02:09,780 deberían estar buscando eso, pero para estar seguro, lo agregaré aquí y renderizaré El elemento ahora, por supuesto, debe tener una función que reciba los datos del elemento 23 00:02:09,780 --> 00:02:16,440 y que al final devuelva lo que queramos representar por pedido. Ahora, un artículo de pedido será más complejo en el futuro, por 24 00:02:16,440 --> 00:02:17,010 ahora 25 00:02:17,010 --> 00:02:21,990 solo enviaré algo de texto, de nuevo para que podamos ver rápidamente algo en la pantalla que 26 00:02:21,990 --> 00:02:23,670 podamos ver antes de refinar esto. 27 00:02:24,000 --> 00:02:27,650 El texto aquí para el elemento dado podría ser y ahora echemos 28 00:02:27,660 --> 00:02:32,590 un vistazo a la orden, allí tenemos el ID, tenemos los elementos que es otra lista, 29 00:02:32,580 --> 00:02:32,990 por 30 00:02:33,000 --> 00:02:40,150 lo que lo más fácil de generar es simplemente la cantidad. Entonces, aquí solo mostraré la cantidad total de 31 00:02:41,050 --> 00:02:44,380 propiedad que mi pedido tiene aquí. 32 00:02:44,430 --> 00:02:46,050 Esto es lo que 33 00:02:46,050 --> 00:02:48,360 saqué en la lista plana, ahora tenemos una 34 00:02:48,360 --> 00:02:55,550 pantalla de pedidos básicos, por supuesto, ahora necesitamos poder llegar a eso. Así que vamos al navegador de la tienda e importamos 35 00:02:55,610 --> 00:03:04,740 la pantalla de pedidos aquí, la pantalla de pedidos desde la carpeta de pantallas, desde la pantalla de pedidos de la tienda y ahora aquí lo 36 00:03:05,180 --> 00:03:11,630 importante es que no quiero agregarlo a este navegador de pila porque no es parte de esto apilar, 37 00:03:11,630 --> 00:03:12,590 en cambio 38 00:03:12,590 --> 00:03:16,490 quiero llegar a él con un menú, con un menú lateral. 39 00:03:16,730 --> 00:03:19,840 Entonces necesitaremos construir un navegador de cajones. 40 00:03:19,910 --> 00:03:24,430 Por supuesto, también podría trabajar con pestañas si lo prefiere, pero quiero trabajar con un cajón aquí, 41 00:03:24,500 --> 00:03:26,720 por lo que necesitamos ese navegador de cajones. 42 00:03:26,750 --> 00:03:31,760 Ahora la pantalla de pedidos, a pesar de que será el único elemento, debería estar en su propia 43 00:03:31,850 --> 00:03:34,490 pila para que también tengamos un encabezado allí. 44 00:03:34,490 --> 00:03:45,550 Por lo tanto, crearé un nuevo navegador de órdenes aquí donde creo otro navegador de pila y allí, la única asignación que necesito es órdenes que apunta a la pantalla 45 00:03:45,550 --> 00:03:53,740 de órdenes, el segundo argumento aquí debería configurar algunas opciones de navegación predeterminadas y usaré las mismas opciones que hago aquí, por 46 00:03:53,740 --> 00:03:57,640 lo tanto, en realidad tomaré este objeto, lo cortaré de 47 00:03:57,970 --> 00:04:04,660 aquí y lo almacenaré en una opción de navegación predeterminada constante y separada, como esta, este es un 48 00:04:04,700 --> 00:04:07,170 patrón que también ya usé en 49 00:04:08,550 --> 00:04:13,590 el módulo de navegación porque ahora podemos usar esta constante aquí en el 50 00:04:13,590 --> 00:04:19,830 navegador de productos para las opciones de navegación predeterminadas y también aquí en el navegador de pedidos. 51 00:04:19,830 --> 00:04:26,760 Ahora, por supuesto, el objetivo es crear un navegador de cajones que denominaré en general navegador de tiendas porque combina 52 00:04:26,760 --> 00:04:29,160 diferentes características de la tienda que 53 00:04:29,160 --> 00:04:36,260 podría decir con la ayuda de crear un navegador de cajones. Allí ahora quiero fusionar estas dos pilas, 54 00:04:36,270 --> 00:04:40,410 el navegador de productos y el navegador de pedidos, 55 00:04:40,410 --> 00:04:48,300 así que aquí necesitamos los productos con el navegador de productos y las órdenes apuntando al navegador 56 00:04:48,330 --> 00:04:56,160 de órdenes, así que a estos navegadores de pila. También quiero configurar mis opciones de contenido allí en 57 00:04:56,160 --> 00:05:02,280 el cajón, esto me permite, por ejemplo, establecer el color de tinte de los elementos cuando 58 00:05:02,280 --> 00:05:11,680 están seleccionados y allí quiero establecer el color de tinte activo en Colores. primario para que estén coloreados con el color primario si están seleccionados. 59 00:05:11,710 --> 00:05:17,710 Ahora es el navegador de la tienda el que debe devolverse aquí. Esto por sí solo no funcionará, pero es un primer 60 00:05:17,710 --> 00:05:18,680 paso, ahora antes 61 00:05:18,730 --> 00:05:25,870 de agregar el botón de menú, vayamos a la pantalla de pedidos y realmente agreguemos un título, así que agregaré opciones de navegación allí, 62 00:05:25,900 --> 00:05:28,630 configuraré esto en un objeto, en este momento no 63 00:05:28,630 --> 00:05:29,940 necesitamos opciones dinámicas aquí 64 00:05:29,950 --> 00:05:35,680 porque solo quiero establecer el título del encabezado para sus pedidos y ahora que lo pienso, también deberíamos agregar 65 00:05:35,680 --> 00:05:36,290 esto 66 00:05:37,060 --> 00:05:38,620 en la pantalla del carrito 67 00:05:38,710 --> 00:05:42,670 donde todavía no lo estoy haciendo. Allí también quiero 68 00:05:42,670 --> 00:05:48,520 configurar esto en la pantalla del carrito, configurarlo en su carrito. 69 00:05:48,520 --> 00:05:51,200 Así que ahora está en las opciones de navegación de la 70 00:05:51,220 --> 00:05:57,270 pantalla del carrito, está en la pantalla de pedidos o este navegador está configurado. Con todo esto configurado, necesitamos agregar este botón de 71 00:05:57,280 --> 00:06:04,000 menú, este ícono de hamburguesa, por ejemplo, en la pantalla de descripción general de los productos donde deseo poder abrir 72 00:06:04,000 --> 00:06:09,220 el cajón e ir a mis pedidos. Ahora para agregarlo allí, vamos a las 73 00:06:09,220 --> 00:06:13,780 opciones de navegación de la pantalla de descripción general del producto que ya 74 00:06:13,780 --> 00:06:14,550 es 75 00:06:14,860 --> 00:06:21,070 dinámica, lo cual es bueno y luego, además de agregar el encabezado correcto para este ícono de 76 00:06:21,070 --> 00:06:29,100 carrito, agregue headerLeft y headerLeft también deberían contener botones de encabezado, por supuesto, pero allí , serán mis elementos de menú, así que 77 00:06:29,220 --> 00:06:37,170 lo nombraré así y allí, quiero usar el menú md o el menú ios dependiendo de la plataforma en la que nos estemos 78 00:06:37,170 --> 00:06:38,910 ejecutando y, por supuesto, quiero 79 00:06:38,920 --> 00:06:46,150 navegar a ninguna parte, en cambio con la navegación apoyo aquí, por así decirlo, quiero llamar al cajón de palanca que 80 00:06:46,160 --> 00:06:48,950 abrirá el cajón lateral. Ahora, por cierto, 81 00:06:48,950 --> 00:06:54,920 también se requiere la misma configuración en la pantalla de pedidos para que podamos salir de esa pantalla. 82 00:06:55,700 --> 00:07:01,820 Entonces, en realidad aquí, necesitaremos esa configuración dinámica de las opciones de navegación donde tenemos una función 83 00:07:01,820 --> 00:07:09,020 aquí en la que devolvemos nuestro objeto de configuración para que allí, también podamos agregar headerLeft con los botones de encabezado, 84 00:07:09,020 --> 00:07:15,170 con nuestro menú que alterna el cajón que se basa en los datos de navegación aquí y, por 85 00:07:15,170 --> 00:07:22,910 supuesto, para eso, tenemos que importar botones de encabezado, botón de encabezado y elemento, por lo que en la pantalla de descripción 86 00:07:22,910 --> 00:07:25,700 general del producto al final, necesito importar 87 00:07:25,700 --> 00:07:30,860 estas cosas aquí, estas dos líneas deben agregarse a la pantalla de pedidos también. 88 00:07:30,860 --> 00:07:32,700 Entonces, permítanme agregarlo, agregando 89 00:07:32,840 --> 00:07:39,020 los botones de encabezado y la importación de elementos desde los botones de encabezado React navigation y la 90 00:07:39,020 --> 00:07:45,300 importación de botones de encabezado desde nuestro componente personalizado. Ahora con eso, si guardamos esto, deberíamos tener un 91 00:07:45,300 --> 00:07:52,410 botón de menú aquí y lo hacemos, abre el cajón, podemos ir a los pedidos y recibo un error aquí porque 92 00:07:52,890 --> 00:07:55,560 en la pantalla de pedidos, por supuesto, 93 00:07:55,560 --> 00:07:58,400 estoy usando la plataforma API, por lo que 94 00:07:58,400 --> 00:08:08,170 deberíamos importarlo allí, hagamos eso, agreguemos plataforma y ahora, si volvemos, podemos ir a los pedidos y allí también podemos volver, y lo mismo es el caso en Android. 95 00:08:10,060 --> 00:08:12,160 Ahora con eso, agregamos el cajón. 96 00:08:12,160 --> 00:08:15,400 Hay una cosa que quiero agregar al cajón, que 97 00:08:15,400 --> 00:08:21,940 no he hecho antes antes de continuar trabajando en mi lista de pedidos, todavía no estamos enviando nada porque 98 00:08:22,240 --> 00:08:28,570 realmente no estamos agregando pedidos, no hemos conectado esto botón de ordenar ahora todavía, no vemos nada que cambie 99 00:08:28,570 --> 00:08:33,180 si agregamos algo al carrito, haga clic en ordenar ahora una vez, al 100 00:08:33,280 --> 00:08:37,810 hacer clic varias veces le dará un error en este momento y luego 101 00:08:37,860 --> 00:08:41,140 veremos ese pedido aquí. Ahora necesitaremos limpiar el carrito, 102 00:08:41,140 --> 00:08:45,940 eso es otra cosa que debemos hacer, pero antes de hacerlo, en el cajón, en realidad también 103 00:08:46,030 --> 00:08:51,340 quiero tener iconos al lado de mis entradas aquí y agregar estos iconos es realmente muy simple. No lo 104 00:08:51,340 --> 00:08:57,640 hice en el módulo de navegación, pero lo haremos ahora. Para agregar íconos, solo necesita ir a las pantallas a 105 00:08:57,640 --> 00:08:59,920 las que está navegando en su cajón 106 00:08:59,920 --> 00:09:04,990 y, en nuestro caso, estos son, por supuesto, estos dos navegadores, por lo que no son pantallas 107 00:09:05,440 --> 00:09:11,200 sino estos dos navegadores y en estos navegadores o si fueron pantallas , en estas pantallas, puede configurar las opciones 108 00:09:11,200 --> 00:09:17,230 de navegación y, con eso, no me refiero a las opciones de navegación predeterminadas que configura para todas las pantallas de 109 00:09:17,230 --> 00:09:23,080 ese navegador, pero las configura para este navegador si se usa dentro de otro navegador como es el caso aquí. 110 00:09:23,080 --> 00:09:25,020 Entonces podemos agregar opciones 111 00:09:25,030 --> 00:09:29,320 de navegación aquí, nuevamente esto no se aplicará a las pantallas de 112 00:09:29,320 --> 00:09:32,550 este navegador, sino que configurará este navegador si 113 00:09:32,740 --> 00:09:39,700 es una pantalla de otro navegador y aquí el navegador de pedidos es una pantalla del navegador de la 114 00:09:39,700 --> 00:09:50,140 tienda al final y allí, en estas opciones de navegación, podemos agregar una entrada de icono de cajón que puede ser una función que obtiene, digamos, la configuración del 115 00:09:51,150 --> 00:09:56,890 cajón, esta función se llama por React navigation y le brinda esta configuración de cajón que 116 00:09:56,890 --> 00:10:03,870 lo más importante le dice, por ejemplo cuál es su color de tinte porque aquí ahora puede devolver un 117 00:10:03,880 --> 00:10:10,630 componente, como un componente Ionicons para representar un icono. Para eso solo necesita asegurarse de que está importando 118 00:10:11,200 --> 00:10:12,780 Ionicons desde @ expo 119 00:10:12,790 --> 00:10:16,650 / vector-icons, por lo que debe agregar esa importación en 120 00:10:16,780 --> 00:10:23,770 el archivo del navegador de la tienda y ahora con eso agregado, si bajamos aquí, estoy devolviendo mi Ionicon, 121 00:10:23,770 --> 00:10:24,640 ahora puedo 122 00:10:24,850 --> 00:10:30,720 configurarlo como siempre hice esto y para eso otra vez, podemos usar la API de plataforma 123 00:10:30,730 --> 00:10:39,340 que ya estamos importando aquí, si no lo está, asegúrese de hacerlo. Podemos usar eso para verificar el sistema operativo y si es 124 00:10:39,790 --> 00:10:43,820 igual a Android, entonces aquí renderizaré md create como un 125 00:10:43,820 --> 00:10:49,820 ícono, de lo contrario, iOS creará y este es solo un ícono que elegí por adelantado. 126 00:10:49,850 --> 00:10:56,640 Ahora, por supuesto, también podemos configurar el tamaño aquí y me adheriré a mi viejo 23 y, además de eso, estableceré un 127 00:10:56,760 --> 00:11:02,130 color si lo desea y ahora, por supuesto, eso no debería ser el color primario porque 128 00:11:02,190 --> 00:11:07,620 entonces este ícono siempre tenga ese color, en cambio, este color debe ser asignado por el cajón, que 129 00:11:07,710 --> 00:11:13,310 es lo que sabe si el elemento está seleccionado o no y que cambiará el color de manera apropiada. 130 00:11:13,380 --> 00:11:16,570 Entonces, aquí, debe acceder a la configuración del cajón. TintColor y esto le 131 00:11:16,680 --> 00:11:22,110 indica qué color debe tener en este momento y este color de tinte cambiará dependiendo de 132 00:11:22,110 --> 00:11:24,330 si está seleccionado actualmente o no. 133 00:11:25,370 --> 00:11:29,350 Ahora ese es el caso de mis pedidos, discúlpeme, el 134 00:11:29,540 --> 00:11:30,470 ícono aquí 135 00:11:30,580 --> 00:11:39,080 debería ser la lista md y la lista iOS, no crear. Así que esa es la configuración de mi pedido ahora con los íconos de la lista 136 00:11:39,440 --> 00:11:46,130 y, por supuesto, esto mismo se puede hacer aquí copiándolo en el navegador de productos y allí, quiero usar md cart o iOS cart, así 137 00:11:46,130 --> 00:11:54,490 que este ícono de carrito nuevamente y ahora esto es Casi listo para ser utilizado. Sin embargo, una cosa que debe hacer es importar 138 00:11:54,490 --> 00:11:59,500 React desde React ahora en este archivo de navegador porque ahora 139 00:11:59,500 --> 00:12:06,610 está utilizando componentes con esa sintaxis jsx. Como sabes, jsx se 140 00:12:06,610 --> 00:12:14,260 compila o convierte a React. createElement al final y, por lo tanto, debe importar React para 141 00:12:14,260 --> 00:12:16,190 que esta sintaxis funcione aquí. 142 00:12:16,510 --> 00:12:21,850 Ahora con eso, si regresas, tienes estos bonitos íconos aquí junto a tus artículos y 143 00:12:21,850 --> 00:12:23,230 también están coloreados 144 00:12:23,230 --> 00:12:26,020 correctamente, también aquí en Android, por supuesto. 145 00:12:26,020 --> 00:12:32,110 Así que ahora que está terminado el cajón lateral, también podemos ir a la pantalla de pedidos e incluso podemos ver un 146 00:12:32,110 --> 00:12:32,920 pedido allí. 147 00:12:32,920 --> 00:12:37,450 Sin embargo, en este momento, el carrito no está despejado y, por lo tanto, si hace clic en esto 148 00:12:37,450 --> 00:12:42,520 varias veces, en realidad recibirá una advertencia porque entonces lo que hace es hacer clic en esto demasiado rápido y, por 149 00:12:42,790 --> 00:12:48,700 lo tanto, crea múltiples pedidos con la misma identificación pseudo única donde al final, use la marca de tiempo actual, si hace clic en esto 150 00:12:48,700 --> 00:12:50,770 demasiado rápido varias veces, es la misma marca 151 00:12:50,860 --> 00:12:56,110 de tiempo, es por eso que viene esta advertencia y me gustaría limpiar el carrito después de hacer un pedido de todos modos. 152 00:12:56,860 --> 00:13:02,050 Así que asegurémonos de despejar el carrito después de realizar un pedido y luego, por supuesto, asegurémonos de enviar los pedidos 153 00:13:02,110 --> 00:13:04,930 de una manera más agradable de lo que lo hacemos actualmente.