Ahora trabajemos en la pantalla de pedidos y generemos más que solo este texto aburrido.
Ahora, al igual que con la pantalla del carrito y la pantalla de resumen de productos, quiero un artículo de pedido más complejo
y, por lo tanto, crearé un componente de artículo de pedido separado en la carpeta de componentes y allí en una carpeta de la tienda.
Como siempre, depende de usted si también
lo hace, pero dado que este no será un componente súper pequeño, prefiero tenerlo en un archivo separado.
Así que importaré React from React aquí y, como era de esperar, importaré un montón de cosas de
React Native y esa sería la vista, el texto, la hoja de estilo, ya que ciertamente configuraremos algunos estilos y
también un botón porque también queremos poder expandir un pedido para que no siempre veamos todos los artículos que forman parte
del pedido, pero que podamos verlos si lo deseamos. Ahora con eso, podemos crear nuestro artículo de pedido constante aquí,
por lo que será el componente en sí mismo el que reciba los accesorios y, al final, tendrá su cuerpo aquí y
devolverá un código jsx y necesitamos un objeto de estilos aquí con Stylesheet. crear así y también
exportar artículo de pedido como predeterminado.
Ahora, ¿cómo debería ser un artículo de pedido?
Ahora, como siempre, depende de usted, pero trabajaré con una vista aquí y mi idea es que siempre muestre como la cantidad total
de ese pedido y la fecha y luego un botón de mostrar detalles que podemos presionar para ver los artículos individuales que
son parte del pedido y para estos artículos, en realidad usaré el componente del artículo del carrito
aquí porque quiero mostrar exactamente los mismos artículos que exhibo en un carrito.
Así que realmente importaré el artículo del carrito del componente del artículo del carrito y reutilizaré ese componente aquí.
Sin embargo, ahora volvemos a ese código
jsx, por lo que tenemos una vista de ajuste alrededor de todo nuestro objeto de pedido, toda nuestra entrada de pedido aquí.
Ahora, quiero tener una primera fila y, por lo tanto, usaré otra vista
para que podamos diseñarla apropiadamente, que debería contener un texto que muestre nuestro total, por lo que digamos la suma de ese
orden y otro texto donde muestro la fecha y esta deben estar en la misma fila con espacio entre ellas.
Debajo de ellos, como mencioné, debería haber un botón que podemos presionar para mostrar los detalles que luego muestra todos los
elementos que forman parte de ese pedido. Ahora con esa configuración, por
supuesto, está claro que la cantidad aquí debería recibirse con la ayuda de accesorios.
Entonces, espero obtener una cantidad de apoyo y llamaré al 2 fijo para generar la cantidad adecuada
de lugares decimales. Ahora para la
fecha, quiero mostrar la fecha de los accesorios aquí para que tengamos una fecha que podamos generar. Para el estilo, en general, aquí quiero tener una asignación de
estilo de elemento de pedido para que podamos diseñar todo el pedido y luego, necesitamos como
digamos resumen de estilos para que podamos diseñar esta fila y
con respecto al texto aquí, esto debería tener un estilo de digamos cantidad total, como siempre estos identificadores de estilo dependen de
usted, aquí
quiero tener un estilo de fecha.
El botón también debe tener su propio color, que obtendré de los colores constantes, por lo tanto, esta
importación debe agregarse
y allí, usaré mi color primario. Bien, eso es todo por
ahora, volveré
a los detalles en un segundo,
ahora apliquemos un poco de estilo aquí para que podamos ver algo. Para el artículo de pedido en sí, volveré a usar ese
aspecto del carrito que ya tengo en el artículo del producto, por lo que copiaré todas estas configuraciones aquí desde el artículo
del producto y las moveré al artículo del pedido para que se
aplique una sombra , un color de fondo, un radio de borde, todo eso debe aplicarse.
Además, agregaré un margen de 20 en todas las direcciones para que cada artículo del pedido tenga algo de espacio alrededor.
Dentro del artículo de pedido, también quiero tener un relleno de 10 para que el contenido allí no
se asiente directamente en los bordes del borde circundante y así sucesivamente. Ahora, para el resumen, que es esta vista que contiene las
dos piezas de texto, el estilo debería ser que
tenemos una dirección flexible de la fila, por supuesto, porque los elementos deben
estar sentados uno al lado del otro. El contenido de justificación debe ser
un espacio entre y además de eso, los elementos de alineación deben estar centrados, de modo que en el eje transversal que aquí
está el eje vertical, los elementos estén centrados.
También quiero asegurarme de tomar el ancho completo disponible aquí para distribuir el texto. Ahora, para la cantidad total, que es el
estilo aplicado a esta primera pieza de texto que genera la cantidad, allí, como siempre, puede estilizarlo como desee, pero estableceré
una familia de fuentes de sans negrita abierta para usar esa versión en negrita de
mi fuente y dígale un tamaño de fuente de 16 digamos y luego para la fecha que es mi estilo apliqué a
ese texto de fecha aquí, allí al final también
quiero usar un tamaño de fuente de 16 pero la familia de fuentes simplemente estará abierta sin
la versión
en negrita y, además, también podemos reutilizar ese color gris oscuro aquí. Ahora con esto, probémoslo y usemos ese artículo de
pedido en la pantalla de pedidos.
Entonces, primero, primero tenemos que importar el artículo de pedido y luego, por supuesto, ir a la carpeta
de componentes, allí a la carpeta de la tienda y luego importar el artículo de pedido desde ese
archivo de artículo de
pedido y aquí, en lugar de representar ese texto, ahora renderizamos ese artículo de pedido aquí como una etiqueta de cierre
automático y, por supuesto, necesitamos configurar esto.
Esto requiere que pasemos la cantidad y la fecha y luego también los artículos detallados, por lo que los
artículos en el pedido,
pero eso vendrá en un segundo paso.
Entonces, por ahora aquí, necesitamos pasar la cantidad y eso, por supuesto, es simplemente itemData. artículo que es un pedido único, no olvide que estamos recorriendo todos los
pedidos aquí,
que es una matriz de pedidos, por lo que es un pedido
único y, allí, la
cantidad si echamos un vistazo a nuestro modelo de pedido se almacena en un campo de importe total, la fecha se
almacena en el campo de fecha.
Entonces, aquí accedemos al campo de cantidad total y para el accesorio de fecha que también necesitamos
pasar, podemos acceder a itemData. articulo. fecha. Si ahora guardamos
esto y lo vemos, agreguemos contenido aquí, ordene esto y luego vaya a nuestra pantalla de pedidos y obtenemos este error.
Ahora, esto se refiere a que los objetos no son válidos como React debería y nos muestra
que al final, es el objeto de estado con el que tiene un problema y eso tiene sentido porque la fecha en nuestro
pedido cuando la creamos aquí en nuestra tienda Redux es una fecha Javascript objeto.
Ahora no podemos mostrar esto como texto como ese. Para generarlo, podemos ir a
nuestro modelo aquí, que al final es el modelo que usamos para crear los pedidos
y en el modelo de pedido, podemos hacer algo que no hemos hecho antes, podemos agregar un método a
esto o, para ser precisos, un captador que es una característica predeterminada de Javascript del Javascript moderno.
Entonces, aquí podemos usar la palabra clave get y luego cualquier nombre de su elección, como fecha legible, que es
como una función, pero no una función a la que llama como una función, pero a la que accede
como una propiedad al final que devuelve un valor calculado y allí Quiero devolver esta fecha, por lo que el objeto de fecha
que se almacena para este objeto, pero luego podemos llamar a locale date string, que es un método Javascript incorporado que podemos usar en los objetos de
fecha para convertir este objeto en una fecha legible para humanos. Allí pasamos el lenguaje para el que
queremos optimizarlo así, por ejemplo, y ahora podemos configurar esto con un segundo
argumento que es un objeto Javascript. Allí puede definir cómo se debe
configurar y adjuntar el año; encontrará los documentos detallados para este
método si desea obtener más información al respecto y, por ejemplo, podemos establecer el año en numérico, el
mes en largo, el día en numérico, la hora a dos dígitos y el minuto también a dos dígitos.
Ahora tenemos esa propiedad de fecha legible a la que podemos acceder en cualquier artículo de pedido
y allí por ahora en la pantalla de pedidos, en lugar de pasar el objeto de datos como
este, accedo a la fecha legible que ahora es esta nueva propiedad getter que agregamos y ahora qué verá que si
vuelvo a hacer este pedido aquí haciendo clic en ordenar ahora y ahora voy a mis pedidos, ahora verá la cantidad total y esta
fecha de formato limpio y ahora si hago lo mismo en Android y hago un pedido aquí y voy a
la pantalla de mis pedidos, ves lo mismo allí. Ahora solo quiero ajustar un poco ese botón, en general
también en iOS, no debería ser tan amplio, no tan ancho aquí. Entonces, en el componente de elemento de pedido donde tengo este botón, al
final lo que podemos hacer es en esta vista aquí, podemos agregar elementos de alineación al centro para centrar el contenido a lo largo del eje transversal que se deja de derecha a derecha y, por lo tanto, ahora si lo
intento esto de nuevo y hago este pedido y voy a pedidos, ves que ahora no se puede presionar allí y es aún
más claro en Android si lo recargamos allí y hago este pedido muy rápido
aquí, ve a la pantalla de pedidos, ahora tenemos este botón Ahora, por supuesto, el objetivo es que
cuando presionamos este botón, este orden se expanda aquí. Por cierto, lo que notará en Android es que
esta fecha no se muestra correctamente,
por lo que es otra cosa que debemos corregir.
Ahora, la razón por la que no se muestra correctamente es cómo funciona React Native
internamente, qué motor Javascript usa internamente y el que usa para Android allí o en plataformas Android simplemente
no admite este método de cadena de fecha agradable para ubicar aquí. .
El motor utilizado en iOS sí, pero en Android,
ese no es el caso, lo que por supuesto es inconveniente y no tan bueno.
Entonces, ¿qué podemos hacer en Android para solucionar esto?
La solución es instalar una biblioteca separada que se llama momento. js, instalamos con npm install
--save moment.
Esta es una biblioteca de terceros que funcionará en
ambas plataformas, lo que hace que las fechas de formateo también sean muy simples.
Así que esperemos a que se complete esta instalación.
Ahora con eso instalado, importa todo como momento a momento y desde la biblioteca que acaba de instalar
y ahora puede usarlo en este archivo aquí.
Ahora podemos comentar esto aquí y en su lugar devolver el momento, ejecutado como una función y pasar
esto. fecha,
entonces el objeto de fecha que queremos formatear y llamar a formato. Ahora, el formato toma una cadena donde puede configurar cómo formatear esto
y adjuntarlo, también encuentra un enlace a los documentos oficiales donde puede aprender
todo sobre las posibilidades que tiene allí.
Ahora aquí, un ejemplo, una forma de formatear esto, digamos un mes largo que hace con
4 M mayúsculas, luego el o para tener una fecha bien formateada en ese mes, salida día
a mes, un año representado por cuatro dígitos y luego una hora siempre representada con dos dígitos y los minutos y ahora
si guardamos esto y
lo intentamos, comience en iOS, agregue esto aquí al carrito, vaya al carrito y ordene esto y ahora vaya a
pedidos, esto se ve
bueno.
Y ahora, si también lo intentamos en Android, pedimos
eso y luego vamos a los pedidos, ahora también se ve bien allí.
Ahora que es una pequeña solución, ahora vamos a trabajar en
el botón y darle un poco de espacio además de reducir su tamaño y eso se puede hacer yendo al resumen aquí, que
es el estilo que se aplica a la vista que contiene las dos piezas de texto, allí simplemente
podemos agregar un margen en la parte inferior de digamos 15 para que tengamos algún espacio entre esa fila de resumen, que es esta
fila de texto en la parte superior y el botón debajo de ella. Así que agregaré esto a mi carrito aquí, ordenar esto, luego volver aquí, ir a pedidos, ahora
esto se ve bien.
Ahora asegurémonos de que el
botón Mostrar detalles también haga algo.