Trabajemos en la pantalla de pedidos antes de agregar la navegación,
no necesitamos terminarla, pero quiero poder verla.
Entonces, importo React de React para poder construir un componente React válido, importar algo de React Native como siempre
y ese algo también es a lo que estamos bastante acostumbrados, ¿verdad?
Nunca es tan sorprendente.
Necesitaremos
una vista, probablemente necesitaremos una lista plana porque posiblemente tengamos múltiples pedidos, una cantidad infinita
y quiero poder representar eso y con eso aquí, podemos construir nuestra pantalla de pedidos de esta manera.
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í
porque solo quiero generar mi lista de pedidos. Por supuesto, los datos que necesitamos aquí vendrán de
Redux, por lo que deberíamos importar
el selector de uso de React Redux, que nos permite acceder a la tienda de Redux.
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é
aquí en las órdenes de reductores combinados aquí, esto nos da acceso al segmento de estado
administrado por el reductor de órdenes y allí, tenemos
otra propiedad de órdenes que contiene la matriz real de órdenes.
Entonces aquí necesito acceder al estado. pedidos. órdenes al final,
eso me da mis órdenes que están almacenadas en Redux.
Ahora aquí, solo necesitamos devolver nuestra lista plana y esto recibe órdenes que deberían ser
una matriz y que son como datos. Ahora no se requiere un extractor de claves en las versiones más nuevas de React
Native porque cada pedido si observa el modelo tiene una ID y las versiones más nuevas de React
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
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
ahora
solo enviaré algo de texto, de nuevo para que podamos ver rápidamente algo en la pantalla que
podamos ver antes de refinar esto.
El texto aquí para el elemento dado podría ser y ahora echemos
un vistazo a la orden, allí tenemos el ID, tenemos los elementos que es otra lista,
por
lo que lo más fácil de generar es simplemente la cantidad. Entonces, aquí solo mostraré la cantidad total de
propiedad que mi pedido tiene aquí.
Esto es lo que
saqué en la lista plana, ahora tenemos una
pantalla de pedidos básicos, por supuesto, ahora necesitamos poder llegar a eso. Así que vamos al navegador de la tienda e importamos
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
importante es que no quiero agregarlo a este navegador de pila porque no es parte de esto apilar,
en cambio
quiero llegar a él con un menú, con un menú lateral.
Entonces necesitaremos construir un navegador de cajones.
Por supuesto, también podría trabajar con pestañas si lo prefiere, pero quiero trabajar con un cajón aquí,
por lo que necesitamos ese navegador de cajones.
Ahora la pantalla de pedidos, a pesar de que será el único elemento, debería estar en su propia
pila para que también tengamos un encabezado allí.
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
de órdenes, el segundo argumento aquí debería configurar algunas opciones de navegación predeterminadas y usaré las mismas opciones que hago aquí, por
lo tanto, en realidad tomaré este objeto, lo cortaré de
aquí y lo almacenaré en una opción de navegación predeterminada constante y separada, como esta, este es un
patrón que también ya usé en
el módulo de navegación porque ahora podemos usar esta constante aquí en el
navegador de productos para las opciones de navegación predeterminadas y también aquí en el navegador de pedidos.
Ahora, por supuesto, el objetivo es crear un navegador de cajones que denominaré en general navegador de tiendas porque combina
diferentes características de la tienda que
podría decir con la ayuda de crear un navegador de cajones. Allí ahora quiero fusionar estas dos pilas,
el navegador de productos y el navegador de pedidos,
así que aquí necesitamos los productos con el navegador de productos y las órdenes apuntando al navegador
de órdenes, así que a estos navegadores de pila. También quiero configurar mis opciones de contenido allí en
el cajón, esto me permite, por ejemplo, establecer el color de tinte de los elementos cuando
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.
Ahora es el navegador de la tienda el que debe devolverse aquí. Esto por sí solo no funcionará, pero es un primer
paso, ahora antes
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í,
configuraré esto en un objeto, en este momento no
necesitamos opciones dinámicas aquí
porque solo quiero establecer el título del encabezado para sus pedidos y ahora que lo pienso, también deberíamos agregar
esto
en la pantalla del carrito
donde todavía no lo estoy haciendo. Allí también quiero
configurar esto en la pantalla del carrito, configurarlo en su carrito.
Así que ahora está en las opciones de navegación de la
pantalla del carrito, está en la pantalla de pedidos o este navegador está configurado. Con todo esto configurado, necesitamos agregar este botón de
menú, este ícono de hamburguesa, por ejemplo, en la pantalla de descripción general de los productos donde deseo poder abrir
el cajón e ir a mis pedidos. Ahora para agregarlo allí, vamos a las
opciones de navegación de la pantalla de descripción general del producto que ya
es
dinámica, lo cual es bueno y luego, además de agregar el encabezado correcto para este ícono de
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
lo nombraré así y allí, quiero usar el menú md o el menú ios dependiendo de la plataforma en la que nos estemos
ejecutando y, por supuesto, quiero
navegar a ninguna parte, en cambio con la navegación apoyo aquí, por así decirlo, quiero llamar al cajón de palanca que
abrirá el cajón lateral. Ahora, por cierto,
también se requiere la misma configuración en la pantalla de pedidos para que podamos salir de esa pantalla.
Entonces, en realidad aquí, necesitaremos esa configuración dinámica de las opciones de navegación donde tenemos una función
aquí en la que devolvemos nuestro objeto de configuración para que allí, también podamos agregar headerLeft con los botones de encabezado,
con nuestro menú que alterna el cajón que se basa en los datos de navegación aquí y, por
supuesto, para eso, tenemos que importar botones de encabezado, botón de encabezado y elemento, por lo que en la pantalla de descripción
general del producto al final, necesito importar
estas cosas aquí, estas dos líneas deben agregarse a la pantalla de pedidos también.
Entonces, permítanme agregarlo, agregando
los botones de encabezado y la importación de elementos desde los botones de encabezado React navigation y la
importación de botones de encabezado desde nuestro componente personalizado. Ahora con eso, si guardamos esto, deberíamos tener un
botón de menú aquí y lo hacemos, abre el cajón, podemos ir a los pedidos y recibo un error aquí porque
en la pantalla de pedidos, por supuesto,
estoy usando la plataforma API, por lo que
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.
Ahora con eso, agregamos el cajón.
Hay una cosa que quiero agregar al cajón, que
no he hecho antes antes de continuar trabajando en mi lista de pedidos, todavía no estamos enviando nada porque
realmente no estamos agregando pedidos, no hemos conectado esto botón de ordenar ahora todavía, no vemos nada que cambie
si agregamos algo al carrito, haga clic en ordenar ahora una vez, al
hacer clic varias veces le dará un error en este momento y luego
veremos ese pedido aquí. Ahora necesitaremos limpiar el carrito,
eso es otra cosa que debemos hacer, pero antes de hacerlo, en el cajón, en realidad también
quiero tener iconos al lado de mis entradas aquí y agregar estos iconos es realmente muy simple. No lo
hice en el módulo de navegación, pero lo haremos ahora. Para agregar íconos, solo necesita ir a las pantallas a
las que está navegando en su cajón
y, en nuestro caso, estos son, por supuesto, estos dos navegadores, por lo que no son pantallas
sino estos dos navegadores y en estos navegadores o si fueron pantallas , en estas pantallas, puede configurar las opciones
de navegación y, con eso, no me refiero a las opciones de navegación predeterminadas que configura para todas las pantallas de
ese navegador, pero las configura para este navegador si se usa dentro de otro navegador como es el caso aquí.
Entonces podemos agregar opciones
de navegación aquí, nuevamente esto no se aplicará a las pantallas de
este navegador, sino que configurará este navegador si
es una pantalla de otro navegador y aquí el navegador de pedidos es una pantalla del navegador de la
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
cajón, esta función se llama por React navigation y le brinda esta configuración de cajón que
lo más importante le dice, por ejemplo cuál es su color de tinte porque aquí ahora puede devolver un
componente, como un componente Ionicons para representar un icono. Para eso solo necesita asegurarse de que está importando
Ionicons desde @ expo
/ vector-icons, por lo que debe agregar esa importación en
el archivo del navegador de la tienda y ahora con eso agregado, si bajamos aquí, estoy devolviendo mi Ionicon,
ahora puedo
configurarlo como siempre hice esto y para eso otra vez, podemos usar la API de plataforma
que ya estamos importando aquí, si no lo está, asegúrese de hacerlo. Podemos usar eso para verificar el sistema operativo y si es
igual a Android, entonces aquí renderizaré md create como un
ícono, de lo contrario, iOS creará y este es solo un ícono que elegí por adelantado.
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
color si lo desea y ahora, por supuesto, eso no debería ser el color primario porque
entonces este ícono siempre tenga ese color, en cambio, este color debe ser asignado por el cajón, que
es lo que sabe si el elemento está seleccionado o no y que cambiará el color de manera apropiada.
Entonces, aquí, debe acceder a la configuración del cajón. TintColor y esto le
indica qué color debe tener en este momento y este color de tinte cambiará dependiendo de
si está seleccionado actualmente o no.
Ahora ese es el caso de mis pedidos, discúlpeme, el
ícono aquí
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
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í
que este ícono de carrito nuevamente y ahora esto es Casi listo para ser utilizado. Sin embargo, una cosa que debe hacer es importar
React desde React ahora en este archivo de navegador porque ahora
está utilizando componentes con esa sintaxis jsx. Como sabes, jsx se
compila o convierte a React. createElement al final y, por lo tanto, debe importar React para
que esta sintaxis funcione aquí.
Ahora con eso, si regresas, tienes estos bonitos íconos aquí junto a tus artículos y
también están coloreados
correctamente, también aquí en Android, por supuesto.
Así que ahora que está terminado el cajón lateral, también podemos ir a la pantalla de pedidos e incluso podemos ver un
pedido allí.
Sin embargo, en este momento, el carrito no está despejado y, por lo tanto, si hace clic en esto
varias veces, en realidad recibirá una advertencia porque entonces lo que hace es hacer clic en esto demasiado rápido y, por
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
demasiado rápido varias veces, es la misma marca
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.
Así que asegurémonos de despejar el carrito después de realizar un pedido y luego, por supuesto, asegurémonos de enviar los pedidos
de una manera más agradable de lo que lo hacemos actualmente.