Para agregar el elemento de acción al encabezado, haré algo que hice también en la sección de navegación, en
la carpeta de componentes, quiero
agregar mi propio botón de encabezado
y ahora para esto, agregaré una nueva subcarpeta en allí que nombraré UI y mi idea aquí es simple.
Tengo la carpeta de la tienda que contiene todos los componentes que uso en mi
tienda, que generan información relacionada con la tienda. En la carpeta UI, quiero tener algunos
bloques de construcción de UI generales que, por supuesto, también uso en esta aplicación
de la tienda, pero que no se centran realmente en generar datos relacionados con la tienda o
el producto, pero que simplemente están allí para proporcionar un estilo o diseño predeterminado y es en esta carpeta de la interfaz de usuario donde
agregaré mi propio botón de encabezado yendo allí e importando React from React y luego importando el botón de encabezado de React navigation
header buttons, este paquete lo instalé al comienzo del módulo, si no lo ha hecho , asegúrese de que npm instale
este paquete y luego también importe Ionicons desde @ expo / vector-icons.
Ahora, para estar súper seguro de que lo tiene instalado, ejecute npm install --save @ expo / vector-icons, para que este
paquete esté disponible en su proyecto.
Estas son las importaciones que necesito aquí,
ahora también quiero importar mis colores de la carpeta de constantes y allí, los colores. js y ahora aquí, agregaré mi componente de
botón de encabezado personalizado, que es un componente React normal al final que recibe accesorios y necesita devolver
algunos jsx y, por supuesto, exportaré mi botón de encabezado personalizado aquí al final y ahora el
jsx que esto devolvió aquí es el botón de encabezado que estoy importando desde React.
Los botones de encabezado de navegación, pero tengo que configurarlo de cierta manera, use el botón
de encabezado aquí desde React. Por un lado, esto debería recibir todos los
accesorios que obtenemos aquí, por lo que solo los reenviaremos, pero además, estableceré mi componente de iconos
aquí en Ionicons, para que siempre usemos Ionicons para renderizar
eso y, por supuesto, podría usar uno de los diferentes conjuntos de iconos vectoriales proporcionados por @ expo / vector-icons también.
Estableceré el tamaño del ícono en 23, lo que me pareció que funciona muy bien, pero por supuesto, también puede experimentar con
diferentes valores aquí, también tal vez si está
utilizando un conjunto de íconos diferente, pruebe con un tamaño de ícono diferente. Y para el color, bueno, ahí depende porque en
Android, tenemos un
fondo rojo aquí, para iOS no, así que necesitamos establecer un color diferente en
función de la plataforma en la que nos estamos
ejecutando, así que importa la plataforma desde React Native aquí y luego podemos verificar la plataforma aquí y si la versión del sistema
operativo es Android, entonces sé
que tengo este fondo de campo sólido, por
lo tanto, el icono debe ser blanco. Por otro lado, en iOS, el fondo no está lleno,
es transparente y, por lo tanto, en iOS, estableceré el color de mi icono en Colores. primario.
Ahora podemos usar eso para agregar un ícono aquí en la pantalla de vista general de productos, allí en mis opciones
de
navegación aquí, quiero agregar mi sección de encabezado a la derecha, por lo que un icono a la derecha de mi encabezado y
para eso aquí, necesitamos importar Un par de cosas, necesitamos importar botones de encabezado y elementos del paquete React
navigation header buttons que instalamos.
Por supuesto, también necesito importar mi propio botón de encabezado desde los botones de encabezado de la interfaz de usuario de los componentes, por
lo que este componente en el que trabajamos y ahora abajo, el encabezado derecho es botones de encabezado como un contenedor para posiblemente tener varios elementos allí,
pero solo agregaré uno elemento, un elemento de cierre automático, en los botones de encabezado antes de continuar con
el elemento, tenemos que establecer el componente del botón de encabezado igual al botón de encabezado, así
que para nuestro propio botón de encabezado aquí. Y el artículo ahora se puede configurar, debe recibir un título que
puede
ser carrito, debe recibir un nombre de icono y realmente quiero usar un icono diferente según
la plataforma en la que nos estamos ejecutando, por lo tanto, de React Native, I importará la plataforma, eso es opcional,
podría usar el mismo ícono para ambas plataformas, pero creo que también se ve bien tener diferentes íconos.
Y luego aquí, comprobaré el sistema operativo de la plataforma y si eso es Android, entonces quiero usar el ícono del carrito md que es el ícono del carrito Ionicon
para el diseño de materiales y de lo contrario usaré el ícono del carrito iOS y de nuevo puedes encontrar todo disponible íconos
en esta lista de íconos que le mostré anteriormente
en el curso, la expo / lista de íconos de íconos vectoriales y por último, pero no menos importante, cuando se
presiona el elemento, probablemente queremos hacer algo y por ahora, no hago nada más que Cambiaré esto pronto.
Si ahora guardamos esto, deberíamos
ver
este ícono aquí, aquí está,
aquí está nuestro carrito, también en Android y ahora solo tenemos que asegurarnos de que cuando toquemos esto,
se nos lleve a la pantalla de nuestro carrito. Para eso, por supuesto, tenemos que agregar algo de lógica o algún resultado a la pantalla del carrito.
Entonces, dentro de la pantalla del carrito, por
supuesto, tenemos un componente React
normal, por lo que importamos React from React, también importamos algo de React Native y ese algo es un componente de vista
para envolver nuestra pantalla tal vez, probablemente produzcamos texto también.
Tendremos un par de artículos de carrito enumerados allí, lo que podemos hacer con
una lista plana para tener la optimización incorporada, probablemente desee diseñar algunas cosas con una hoja
de estilo y también importaré el componente del botón incorporado. Ahora, la pantalla de mi carrito aquí, como siempre, es un componente React y
configuraré este objeto de estilos aquí con Stylesheet. crear para que podamos diseñar este componente también
y al final, exportamos nuestra pantalla de carrito aquí de forma predeterminada.
Ahora, por supuesto, puede construir esta pantalla de carrito de la forma que desee, la construiré de
tal manera que tengamos una vista y, en esa vista, quiero tener dos secciones principales. La sección superior es como el resumen donde
veo la cantidad total y donde tengo el botón de ordenar ahora.
Esto estará en una fila, por lo que tendré una vista anidada aquí donde puedo colocar elementos uno
al lado del otro donde tengo un texto donde digo
total y luego aquí el signo de dólar y luego mi precio total tal vez. También podemos anidar esto, puede tener componentes de
texto anidados si recuerda sin problemas darle a este un color separado, por ejemplo, así que
por ahora codifico 19. 99 allí, pero luego esto se derivará dinámicamente.
Así que
eso es una cosa y, además, en la misma fila aquí, quiero tener un botón con un título
de pedido ahora donde puedo presionarlo para hacer un pedido, limpiar mi carrito y agregar esto
a mis pedidos que todavía tenemos
que administrar y mostrarlo en la pantalla de pedido al final. Ahora, debajo de esta sección de resumen, quiero tener una lista plana con mis artículos de carrito separados, para
que realmente podamos ver qué hay
en el carrito, qué productos hay allí, qué cantidad de cada producto hay,
así que eso es otra cosa que saldrá allí. Por el momento aquí, solo agregaré una vista
con un texto de los artículos del carrito como marcador de posición, pero nuevamente, esta será una
lista plana en el futuro, pero comencemos con el total aquí. Para obtener ese total, podemos aprovechar Redux
porque allí estamos administrando nuestro carrito, por lo que podemos usar el selector de uso de React Redux como aprendió para
obtener datos de nuestra tienda y aquí, tengo la cantidad total de mi carrito que tal vez obtengo
con la ayuda del selector de uso de mi estado. carro, rebanada. carrito aquí porque en
la aplicación. archivo js en reductores combinados, asigné una clave de carro aquí a mi reductor de carro.
Entonces aquí tengo. carrito y luego allí, dentro del
reductor de carrito, administro mi cantidad total y el campo de cantidad total, así que eso es lo que necesitamos para acceder aquí, cantidad total.
Esto le da al carrito la cantidad total y ahora podemos usarlo allí y con eso para
asegurar que esto también se vea bien, es hora de un poco de estilo.
Entonces, en la vista superior aquí, agregaré un estilo de pantalla tal vez porque esto envuelve toda
la pantalla
al final, luego aquí en esa vista, agregaré un estilo de resumen porque contiene todos
los elementos de resumen, luego aquí en este
texto, agregaré un estilo de texto de resumen y luego aquí, agregaré un estilo de cantidad, para que podamos darle un estilo diferente a la cantidad de texto.
Entonces, para los
estilos que quiero establecer, vayamos a la hoja de estilos y agreguemos pantalla, resumen, texto de resumen y luego, ¿cómo lo llamé?
cantidad y, por supuesto, como siempre, depende totalmente de usted cómo quiere diseñar esto ahora.
Ahora comenzaré con la pantalla, al final quiero tomar el tamaño completo de la pantalla si es necesario con
la lista plana más adelante, pero comenzaré de manera simple y solo diremos que quiero tener un margen en todos direcciones en realidad aquí de
20, así que alrededor de todo, para que haya algo de espacio alrededor de todo. Luego, aquí, resumen cuál es nuestro cuadro con todos los elementos
allí con el pedido ahora y nuestro texto debe usar una dirección flexible de
fila para colocar los elementos en una fila.
Fui a alinear elementos en el centro para asegurarme de que estén centrados verticalmente y en su
eje principal, quiero usar el espacio de contenido justificado para que los elementos tengan espacio libre entre ellos y los elementos
son este texto aquí y este botón. Además de eso, podemos agregar un poco de margen
aquí, tal vez
también de 20, que es principalmente importante también para tener un poco de espacio entre el resumen y
nuestra lista plana, por lo tanto, en realidad usaré el margen inferior aquí solo para tener un margen abajo y quiero agregar
un relleno de 10 aquí porque el resumen debe estar en un cuadro elevado y
para este cuadro aquí, iré al componente del elemento de mi producto y copiaré mi configuración de sombra aquí y el borde radio que tal vez tengo aquí y el
color de fondo, de modo que tenga el mismo aspecto aquí en el carrito y, por supuesto, depende
de usted si lo desea o no, pero lo copiaré allí.
Para el texto de resumen, ahora quiero usar una familia de fuentes de caracteres abiertos sin negrita para resaltar realmente este total y un
tamaño de fuente de 18 y para la cantidad de texto allí, estableceré
el color en colores. acentuar el color.
Ahora, para eso importante, por supuesto, debe importar colores desde la carpeta de constantes y luego uso acento
y no primario para que realmente se destaque. Para ver si se ve como queremos que se vea, debemos
asegurarnos de que tocar este botón de encabezado en nuestra pantalla de resumen del producto realmente nos
lleve a la pantalla del carrito y para eso, se requieren dos cosas.
Por un lado, tenemos que navegar aquí, pero antes de poder hacerlo,
debemos registrar la pantalla del carrito en nuestro navegador. Así que haré eso primero, importaré la pantalla de mi carrito aquí desde la
carpeta de pantallas, como era de esperar, desde la carpeta de la tienda y allí desde la pantalla del carrito y ahora esa es la tercera
pantalla que agrego aquí a este navegador de pila, puntos de carrito en la pantalla del carrito . Con esa configuración agregada aquí, podemos volver a la pantalla de información
general del producto y allí, ahora necesitamos ese formulario funcional para las opciones de navegación porque los datos de navegación
nos permiten acceder al accesorio de navegación y llamar a navegar, por lo
tanto, necesitamos ajustar esto en otro objeto que devolvemos
y luego aquí podemos llamar a navData. navegación. navego y allí, voy al carrito y, por supuesto,
este es el identificador que acabo de elegir en el navegador de
la tienda aquí, este. Con eso, veamos, si hago
clic aquí, ahí estamos, este es mi
total,
en realidad creo que
el color de acento no es tan bueno allí, así que
en realidad volveré a la pantalla del carrito y diseñaré esto para usar el color primario también, pero lo
principal es que podemos ir allí y si ahora trato de agregar artículos al carrito, agregué la camisa dos veces
y la alfombra una vez, esa cantidad total me parece bien. Probemos también esto en Android, por supuesto, para asegurarnos de que
funcione allí y, en general, funcione, agrego una camisa roja más y, por lo tanto, aquí también vemos un
problema con la forma en que se muestra. Para solucionar esto, en la pantalla del carrito, asegúrese de
que en el precio, siempre generemos dos decimales en la cantidad fijada. Ahora, por cierto, en caso de que se pregunte
de dónde viene esto, este número
largo, esto no es un error o nada realmente para React Native, este es un comportamiento
normal de Javascript cuando está trabajando con números de punto flotante y, por supuesto, para corregir No se debe invocar en el
estilo aquí, sino en la cantidad total del carrito. Así que este fue un comportamiento
normal, no un error, así es como Javascript internamente almacena números de coma flotante, pero
ahora nos aseguramos de que esto se muestre correctamente con dos decimales. Lo que falta es el botón y aquí ahora realmente quiero usar el color, el acento de
colores para tener mi botón de color de acento. Entonces, si ahora voy a mi carrito aquí en iOS, así es como se
ve el botón allí, así es como se ve en Android.
Siempre podemos presionar esto, por supuesto, quiero desactivarlo, aunque si no hay nada en el carrito
y para eso, ahora también necesitamos obtener nuestros artículos del carrito. Por lo tanto, los artículos del carrito también se pueden obtener con el selector
de uso, también desde la sección del carrito, pero allí, lo que nos interesa es el accesorio de artículos del reductor del carrito.
Entonces, si eche un vistazo al reductor de carrito, allí verá que tenemos los artículos de propiedad.
Este es un objeto que estoy recuperando
ahora, por lo que los artículos del carrito son un objeto, no una matriz, en realidad una matriz sería mejor para mí aquí y, por lo tanto, usaré
la forma larga para obtener esto y devolveré una matriz aquí y no un objeto Entonces, podemos obtener nuestros artículos de carrito transformados aquí,
por ejemplo, creando una nueva matriz aquí dentro de esta función de selector y luego podemos agregar un bucle for / in para pasar por
todas las teclas en estado. carro. artículos, para recorrer todos los
pares clave-valor en este objeto de artículos de
carrito que tenemos allí y quiero agregar cada uno de
ellos como un artículo a los artículos de carrito transformados. Entonces, empujaré un objeto Javascript que tenga una ID de producto, digamos cuál es solo
mi clave, porque en el objeto de artículos del carrito de ID, la ID del producto se almacena como una clave, si
lo recuerda, así
que ahora agrego esto a la propiedad de ID del producto en este objeto lo agrego a la matriz de artículos del carrito transformado y
además de eso, tendré el título de mi producto, que por supuesto es el estado. carro. artículos para la clave
dada. Titulo del producto.
Si echas un vistazo al modelo de tu carrito, verás que allí, el título del producto y el precio del producto son los
nombres de propiedad que contienen el título del producto y el
precio del producto, así que así
es como accedemos a ambos, así que haré lo mismo aquí por el precio del producto y luego, también necesito
la cantidad que es estado. carro. artículos para la clave dada. cantidad y, por supuesto, también la suma que es el estado. carro. artículos. llave. suma, de nuevo básicamente lo que teníamos aquí en el artículo del carrito.
Entonces, lo que estoy haciendo es decir
que estoy creando un nuevo artículo de carrito, no con mi modelo, porque es un
artículo de carrito con una propiedad de ID de producto adicional, así que tengo esto aquí y ahora es esta matriz transformada de artículos
de carrito que devuelvo después de esto para el bucle, de modo que este selector al final devuelve una matriz y
no un objeto, por
lo que los artículos del carrito ahora son una matriz que nos facilita usarlo en la lista plana y también nos permite
verificar aquí en el botón ordenar ahora si queremos desactivarlo simplemente comprobando la longitud de esta matriz que ahora
tenemos en los artículos del carrito.
Entonces, aquí en el botón, podemos
configurar el accesorio de desactivación que admite, afortunadamente, este es un componente incorporado que simplemente tiene un accesorio desactivado y allí puedo verificar
si la longitud de los artículos del carrito es igual a cero, si es así, entonces yo Sé que está vacío y, de hecho, quiero desactivar el botón. Entonces, deshabilitado recibe verdadero o falso, por defecto es falso, pero lo estableceré en verdadero si la longitud de
los artículos del carrito es 0. Y ahora ves si voy a
la pantalla del carrito, esto está deshabilitado, si agrego
un producto y voy allí, está habilitado y, por supuesto, también puedes usar un color diferente para el botón de ordenar ahora si lo deseas.
Ahora con eso, estamos un paso más cerca de
los carros terminados y, por supuesto, el próximo objetivo es dar salida a los artículos del carro.