1 00:00:02,160 --> 00:00:07,040 Ahora trabajemos en la pantalla de pedidos y generemos más que solo este texto aburrido. 2 00:00:07,040 --> 00:00:12,390 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 3 00:00:12,390 --> 00:00:17,970 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. 4 00:00:18,000 --> 00:00:20,550 Como siempre, depende de usted si también 5 00:00:20,550 --> 00:00:26,420 lo hace, pero dado que este no será un componente súper pequeño, prefiero tenerlo en un archivo separado. 6 00:00:26,550 --> 00:00:32,880 Así que importaré React from React aquí y, como era de esperar, importaré un montón de cosas de 7 00:00:32,880 --> 00:00:39,660 React Native y esa sería la vista, el texto, la hoja de estilo, ya que ciertamente configuraremos algunos estilos y 8 00:00:39,990 --> 00:00:47,100 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 9 00:00:47,100 --> 00:00:54,200 del pedido, pero que podamos verlos si lo deseamos. Ahora con eso, podemos crear nuestro artículo de pedido constante aquí, 10 00:00:54,290 --> 00:01:00,710 por lo que será el componente en sí mismo el que reciba los accesorios y, al final, tendrá su cuerpo aquí y 11 00:01:00,740 --> 00:01:08,460 devolverá un código jsx y necesitamos un objeto de estilos aquí con Stylesheet. crear así y también 12 00:01:08,520 --> 00:01:13,990 exportar artículo de pedido como predeterminado. 13 00:01:14,070 --> 00:01:16,460 Ahora, ¿cómo debería ser un artículo de pedido? 14 00:01:16,470 --> 00:01:23,280 Ahora, como siempre, depende de usted, pero trabajaré con una vista aquí y mi idea es que siempre muestre como la cantidad total 15 00:01:23,280 --> 00:01:29,880 de ese pedido y la fecha y luego un botón de mostrar detalles que podemos presionar para ver los artículos individuales que 16 00:01:29,880 --> 00:01:35,130 son parte del pedido y para estos artículos, en realidad usaré el componente del artículo del carrito 17 00:01:35,130 --> 00:01:39,620 aquí porque quiero mostrar exactamente los mismos artículos que exhibo en un carrito. 18 00:01:39,690 --> 00:01:46,190 Así que realmente importaré el artículo del carrito del componente del artículo del carrito y reutilizaré ese componente aquí. 19 00:01:46,380 --> 00:01:48,400 Sin embargo, ahora volvemos a ese código 20 00:01:48,540 --> 00:01:54,110 jsx, por lo que tenemos una vista de ajuste alrededor de todo nuestro objeto de pedido, toda nuestra entrada de pedido aquí. 21 00:01:54,270 --> 00:01:58,980 Ahora, quiero tener una primera fila y, por lo tanto, usaré otra vista 22 00:01:58,980 --> 00:02:06,660 para que podamos diseñarla apropiadamente, que debería contener un texto que muestre nuestro total, por lo que digamos la suma de ese 23 00:02:06,660 --> 00:02:13,470 orden y otro texto donde muestro la fecha y esta deben estar en la misma fila con espacio entre ellas. 24 00:02:14,370 --> 00:02:20,660 Debajo de ellos, como mencioné, debería haber un botón que podemos presionar para mostrar los detalles que luego muestra todos los 25 00:02:20,660 --> 00:02:25,440 elementos que forman parte de ese pedido. Ahora con esa configuración, por 26 00:02:25,470 --> 00:02:32,040 supuesto, está claro que la cantidad aquí debería recibirse con la ayuda de accesorios. 27 00:02:32,040 --> 00:02:38,100 Entonces, espero obtener una cantidad de apoyo y llamaré al 2 fijo para generar la cantidad adecuada 28 00:02:38,100 --> 00:02:40,350 de lugares decimales. Ahora para la 29 00:02:40,350 --> 00:02:49,360 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 30 00:02:49,380 --> 00:02:55,860 estilo de elemento de pedido para que podamos diseñar todo el pedido y luego, necesitamos como 31 00:02:55,860 --> 00:03:00,380 digamos resumen de estilos para que podamos diseñar esta fila y 32 00:03:00,450 --> 00:03:09,240 con respecto al texto aquí, esto debería tener un estilo de digamos cantidad total, como siempre estos identificadores de estilo dependen de 33 00:03:09,300 --> 00:03:10,290 usted, aquí 34 00:03:10,290 --> 00:03:12,720 quiero tener un estilo de fecha. 35 00:03:16,000 --> 00:03:21,640 El botón también debe tener su propio color, que obtendré de los colores constantes, por lo tanto, esta 36 00:03:21,640 --> 00:03:22,830 importación debe agregarse 37 00:03:22,840 --> 00:03:26,130 y allí, usaré mi color primario. Bien, eso es todo por 38 00:03:26,610 --> 00:03:27,430 ahora, volveré 39 00:03:27,450 --> 00:03:29,160 a los detalles en un segundo, 40 00:03:29,160 --> 00:03:36,380 ahora apliquemos un poco de estilo aquí para que podamos ver algo. Para el artículo de pedido en sí, volveré a usar ese 41 00:03:36,480 --> 00:03:43,050 aspecto del carrito que ya tengo en el artículo del producto, por lo que copiaré todas estas configuraciones aquí desde el artículo 42 00:03:43,050 --> 00:03:46,770 del producto y las moveré al artículo del pedido para que se 43 00:03:46,770 --> 00:03:51,770 aplique una sombra , un color de fondo, un radio de borde, todo eso debe aplicarse. 44 00:03:52,010 --> 00:03:57,210 Además, agregaré un margen de 20 en todas las direcciones para que cada artículo del pedido tenga algo de espacio alrededor. 45 00:03:58,790 --> 00:04:03,830 Dentro del artículo de pedido, también quiero tener un relleno de 10 para que el contenido allí no 46 00:04:03,830 --> 00:04:10,800 se asiente directamente en los bordes del borde circundante y así sucesivamente. Ahora, para el resumen, que es esta vista que contiene las 47 00:04:10,800 --> 00:04:13,700 dos piezas de texto, el estilo debería ser que 48 00:04:13,770 --> 00:04:17,940 tenemos una dirección flexible de la fila, por supuesto, porque los elementos deben 49 00:04:17,940 --> 00:04:22,590 estar sentados uno al lado del otro. El contenido de justificación debe ser 50 00:04:22,590 --> 00:04:31,230 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í 51 00:04:31,230 --> 00:04:34,280 está el eje vertical, los elementos estén centrados. 52 00:04:34,290 --> 00:04:40,160 También quiero asegurarme de tomar el ancho completo disponible aquí para distribuir el texto. Ahora, para la cantidad total, que es el 53 00:04:40,180 --> 00:04:47,620 estilo aplicado a esta primera pieza de texto que genera la cantidad, allí, como siempre, puede estilizarlo como desee, pero estableceré 54 00:04:47,830 --> 00:04:53,350 una familia de fuentes de sans negrita abierta para usar esa versión en negrita de 55 00:04:53,350 --> 00:05:01,180 mi fuente y dígale un tamaño de fuente de 16 digamos y luego para la fecha que es mi estilo apliqué a 56 00:05:01,180 --> 00:05:04,630 ese texto de fecha aquí, allí al final también 57 00:05:04,630 --> 00:05:10,840 quiero usar un tamaño de fuente de 16 pero la familia de fuentes simplemente estará abierta sin 58 00:05:10,840 --> 00:05:12,010 la versión 59 00:05:12,040 --> 00:05:20,800 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 60 00:05:20,810 --> 00:05:24,080 pedido en la pantalla de pedidos. 61 00:05:24,080 --> 00:05:29,480 Entonces, primero, primero tenemos que importar el artículo de pedido y luego, por supuesto, ir a la carpeta 62 00:05:29,480 --> 00:05:34,970 de componentes, allí a la carpeta de la tienda y luego importar el artículo de pedido desde ese 63 00:05:34,970 --> 00:05:36,520 archivo de artículo de 64 00:05:36,710 --> 00:05:42,800 pedido y aquí, en lugar de representar ese texto, ahora renderizamos ese artículo de pedido aquí como una etiqueta de cierre 65 00:05:42,800 --> 00:05:44,710 automático y, por supuesto, necesitamos configurar esto. 66 00:05:44,720 --> 00:05:50,780 Esto requiere que pasemos la cantidad y la fecha y luego también los artículos detallados, por lo que los 67 00:05:50,780 --> 00:05:52,160 artículos en el pedido, 68 00:05:52,190 --> 00:05:54,400 pero eso vendrá en un segundo paso. 69 00:05:54,410 --> 00:06:02,120 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 70 00:06:02,120 --> 00:06:03,290 pedidos aquí, 71 00:06:03,290 --> 00:06:07,020 que es una matriz de pedidos, por lo que es un pedido 72 00:06:07,040 --> 00:06:08,260 único y, allí, la 73 00:06:08,720 --> 00:06:15,030 cantidad si echamos un vistazo a nuestro modelo de pedido se almacena en un campo de importe total, la fecha se 74 00:06:15,030 --> 00:06:16,830 almacena en el campo de fecha. 75 00:06:16,850 --> 00:06:21,980 Entonces, aquí accedemos al campo de cantidad total y para el accesorio de fecha que también necesitamos 76 00:06:21,980 --> 00:06:28,070 pasar, podemos acceder a itemData. articulo. fecha. Si ahora guardamos 77 00:06:28,070 --> 00:06:37,940 esto y lo vemos, agreguemos contenido aquí, ordene esto y luego vaya a nuestra pantalla de pedidos y obtenemos este error. 78 00:06:38,030 --> 00:06:42,980 Ahora, esto se refiere a que los objetos no son válidos como React debería y nos muestra 79 00:06:42,980 --> 00:06:50,010 que al final, es el objeto de estado con el que tiene un problema y eso tiene sentido porque la fecha en nuestro 80 00:06:50,010 --> 00:06:54,540 pedido cuando la creamos aquí en nuestra tienda Redux es una fecha Javascript objeto. 81 00:06:54,650 --> 00:06:58,150 Ahora no podemos mostrar esto como texto como ese. Para generarlo, podemos ir a 82 00:06:58,160 --> 00:07:03,230 nuestro modelo aquí, que al final es el modelo que usamos para crear los pedidos 83 00:07:03,820 --> 00:07:09,830 y en el modelo de pedido, podemos hacer algo que no hemos hecho antes, podemos agregar un método a 84 00:07:10,070 --> 00:07:15,650 esto o, para ser precisos, un captador que es una característica predeterminada de Javascript del Javascript moderno. 85 00:07:15,650 --> 00:07:21,200 Entonces, aquí podemos usar la palabra clave get y luego cualquier nombre de su elección, como fecha legible, que es 86 00:07:21,200 --> 00:07:26,330 como una función, pero no una función a la que llama como una función, pero a la que accede 87 00:07:26,330 --> 00:07:32,600 como una propiedad al final que devuelve un valor calculado y allí Quiero devolver esta fecha, por lo que el objeto de fecha 88 00:07:32,600 --> 00:07:40,100 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 89 00:07:40,130 --> 00:07:46,790 fecha para convertir este objeto en una fecha legible para humanos. Allí pasamos el lenguaje para el que 90 00:07:46,790 --> 00:07:52,190 queremos optimizarlo así, por ejemplo, y ahora podemos configurar esto con un segundo 91 00:07:52,220 --> 00:07:58,100 argumento que es un objeto Javascript. Allí puede definir cómo se debe 92 00:07:58,100 --> 00:08:03,260 configurar y adjuntar el año; encontrará los documentos detallados para este 93 00:08:03,260 --> 00:08:11,020 método si desea obtener más información al respecto y, por ejemplo, podemos establecer el año en numérico, el 94 00:08:14,470 --> 00:08:22,980 mes en largo, el día en numérico, la hora a dos dígitos y el minuto también a dos dígitos. 95 00:08:23,160 --> 00:08:28,650 Ahora tenemos esa propiedad de fecha legible a la que podemos acceder en cualquier artículo de pedido 96 00:08:29,190 --> 00:08:34,960 y allí por ahora en la pantalla de pedidos, en lugar de pasar el objeto de datos como 97 00:08:35,010 --> 00:08:41,520 este, accedo a la fecha legible que ahora es esta nueva propiedad getter que agregamos y ahora qué verá que si 98 00:08:41,520 --> 00:08:48,960 vuelvo a hacer este pedido aquí haciendo clic en ordenar ahora y ahora voy a mis pedidos, ahora verá la cantidad total y esta 99 00:08:48,960 --> 00:08:55,320 fecha de formato limpio y ahora si hago lo mismo en Android y hago un pedido aquí y voy a 100 00:08:55,320 --> 00:09:02,130 la pantalla de mis pedidos, ves lo mismo allí. Ahora solo quiero ajustar un poco ese botón, en general 101 00:09:02,130 --> 00:09:09,840 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 102 00:09:09,840 --> 00:09:21,750 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 103 00:09:21,750 --> 00:09:28,550 intento esto de nuevo y hago este pedido y voy a pedidos, ves que ahora no se puede presionar allí y es aún 104 00:09:28,550 --> 00:09:32,760 más claro en Android si lo recargamos allí y hago este pedido muy rápido 105 00:09:35,950 --> 00:09:43,060 aquí, ve a la pantalla de pedidos, ahora tenemos este botón Ahora, por supuesto, el objetivo es que 106 00:09:43,060 --> 00:09:50,530 cuando presionamos este botón, este orden se expanda aquí. Por cierto, lo que notará en Android es que 107 00:09:50,530 --> 00:09:53,460 esta fecha no se muestra correctamente, 108 00:09:53,470 --> 00:09:56,970 por lo que es otra cosa que debemos corregir. 109 00:09:57,050 --> 00:10:02,240 Ahora, la razón por la que no se muestra correctamente es cómo funciona React Native 110 00:10:02,300 --> 00:10:08,810 internamente, qué motor Javascript usa internamente y el que usa para Android allí o en plataformas Android simplemente 111 00:10:08,810 --> 00:10:13,980 no admite este método de cadena de fecha agradable para ubicar aquí. . 112 00:10:14,180 --> 00:10:17,500 El motor utilizado en iOS sí, pero en Android, 113 00:10:17,510 --> 00:10:23,030 ese no es el caso, lo que por supuesto es inconveniente y no tan bueno. 114 00:10:23,030 --> 00:10:26,030 Entonces, ¿qué podemos hacer en Android para solucionar esto? 115 00:10:26,030 --> 00:10:34,610 La solución es instalar una biblioteca separada que se llama momento. js, instalamos con npm install 116 00:10:34,610 --> 00:10:36,440 --save moment. 117 00:10:36,740 --> 00:10:39,580 Esta es una biblioteca de terceros que funcionará en 118 00:10:39,590 --> 00:10:43,830 ambas plataformas, lo que hace que las fechas de formateo también sean muy simples. 119 00:10:44,420 --> 00:10:47,000 Así que esperemos a que se complete esta instalación. 120 00:10:47,090 --> 00:10:53,400 Ahora con eso instalado, importa todo como momento a momento y desde la biblioteca que acaba de instalar 121 00:10:53,570 --> 00:10:56,530 y ahora puede usarlo en este archivo aquí. 122 00:10:56,540 --> 00:11:03,950 Ahora podemos comentar esto aquí y en su lugar devolver el momento, ejecutado como una función y pasar 123 00:11:03,950 --> 00:11:05,030 esto. fecha, 124 00:11:05,050 --> 00:11:12,800 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 125 00:11:12,800 --> 00:11:16,880 y adjuntarlo, también encuentra un enlace a los documentos oficiales donde puede aprender 126 00:11:16,880 --> 00:11:19,330 todo sobre las posibilidades que tiene allí. 127 00:11:19,360 --> 00:11:26,760 Ahora aquí, un ejemplo, una forma de formatear esto, digamos un mes largo que hace con 128 00:11:26,770 --> 00:11:34,570 4 M mayúsculas, luego el o para tener una fecha bien formateada en ese mes, salida día 129 00:11:34,570 --> 00:11:44,730 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 130 00:11:45,180 --> 00:11:47,160 si guardamos esto y 131 00:11:47,180 --> 00:11:56,250 lo intentamos, comience en iOS, agregue esto aquí al carrito, vaya al carrito y ordene esto y ahora vaya a 132 00:11:56,250 --> 00:11:57,840 pedidos, esto se ve 133 00:11:57,840 --> 00:11:58,870 bueno. 134 00:11:59,040 --> 00:12:02,440 Y ahora, si también lo intentamos en Android, pedimos 135 00:12:02,730 --> 00:12:06,860 eso y luego vamos a los pedidos, ahora también se ve bien allí. 136 00:12:06,960 --> 00:12:10,610 Ahora que es una pequeña solución, ahora vamos a trabajar en 137 00:12:10,740 --> 00:12:17,220 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 138 00:12:17,220 --> 00:12:22,260 es el estilo que se aplica a la vista que contiene las dos piezas de texto, allí simplemente 139 00:12:22,260 --> 00:12:29,190 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 140 00:12:29,190 --> 00:12:36,540 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 141 00:12:36,690 --> 00:12:37,750 esto se ve bien. 142 00:12:37,770 --> 00:12:39,300 Ahora asegurémonos de que el 143 00:12:39,300 --> 00:12:41,000 botón Mostrar detalles también haga algo.