1 00:00:02,250 --> 00:00:07,290 Ahora que tenemos los conceptos básicos sobre la navegación hacia abajo, que podemos pasar 2 00:00:07,350 --> 00:00:14,200 datos, retrocedamos y centrémonos en la aplicación que estamos creando, que por supuesto no se ve tan bien y 3 00:00:14,190 --> 00:00:18,450 centrémonos en estos elementos de categoría aquí en la cuadrícula 4 00:00:18,450 --> 00:00:21,210 Podemos tocarlos, pero obviamente esta no 5 00:00:21,210 --> 00:00:27,200 es una aplicación que le gustaría usar. Ahora para hacer que sea más útil en 6 00:00:27,240 --> 00:00:30,400 la pantalla de categorías aquí, en realidad tomaré este elemento 7 00:00:30,490 --> 00:00:36,030 aquí, esta opacidad táctil, por lo que este elemento de cuadrícula y lo externalizaré en un componente 8 00:00:36,030 --> 00:00:43,210 separado, no es algo que debe hacer, sino algo que puede considerar hacer simplemente para mantener sus componentes más delgados y limpios. 9 00:00:43,260 --> 00:00:49,890 Para eso en la carpeta de componentes, agregaré un CategoryGridTile. js, el nombre, por supuesto, depende 10 00:00:49,890 --> 00:00:56,400 totalmente de usted y, allí, necesitamos importar React from React, ciertamente también necesitaremos algunas cosas 11 00:00:56,400 --> 00:01:03,990 de React Native para construir un componente allí, es decir, necesitaremos una opacidad táctil de Por supuesto, necesitaremos 12 00:01:04,020 --> 00:01:11,550 la vista, necesitaremos texto y necesitaremos una hoja de estilo para que también podamos diseñar esto aquí 13 00:01:11,550 --> 00:01:14,900 y ahora podemos crear el componente de mosaico 14 00:01:14,940 --> 00:01:22,980 de cuadrícula de categoría aquí que recibe algunos accesorios. Necesitaremos una hoja de estilo aquí que 15 00:01:22,980 --> 00:01:31,110 almacenaré en los estilos constantes y, por supuesto, como siempre, luego podemos exportar el 16 00:01:31,110 --> 00:01:39,810 componente y dentro de esta función, devolveré el código jsx que acabo de cortar de la 17 00:01:39,810 --> 00:01:46,810 pantalla de categorías aquí . Entonces, aquí, la opacidad táctil configurada, este elemento de cuadrícula está configurado, pero 18 00:01:46,810 --> 00:01:52,560 tendremos que cambiar un par de cosas. En la pantalla de categorías, por ejemplo, estoy configurando el estilo de elemento de cuadrícula aquí. Ahora podríamos dejarlo aquí y 19 00:01:52,560 --> 00:01:58,530 pasarlo a nuestro mosaico de cuadrícula y luego combinarlo allí como lo aprendió, pero simplemente configuraré todo el 20 00:01:58,530 --> 00:02:03,510 estilo en el componente en sí porque solo usaremos el mosaico de cuadrícula de 21 00:02:03,540 --> 00:02:09,810 categoría en el cuadrícula en la pantalla de categorías. Así que agregaré el estilo del elemento de cuadrícula aquí 22 00:02:09,870 --> 00:02:10,830 a la hoja 23 00:02:10,860 --> 00:02:17,280 de estilo en este archivo, por lo tanto, esto funciona nuevamente, el controlador onPress aún no funcionará, lo arreglaremos pronto y ahora 24 00:02:17,280 --> 00:02:24,720 podemos volver a la pantalla de categorías y, por supuesto, Importar nuestro componente. Así que importe el componente de mosaico de cuadrícula 25 00:02:24,750 --> 00:02:28,250 de categoría allí desde la carpeta de 26 00:02:28,290 --> 00:02:37,080 componentes y allí, el mosaico de cuadrícula de categoría y ahora simplemente devuelva esto aquí cuando rendericemos un nuevo elemento. 27 00:02:37,080 --> 00:02:38,990 Ahora, por supuesto, de 28 00:02:39,000 --> 00:02:45,300 esta manera no funcionará, necesitamos reenviar algunos datos al mosaico de la cuadrícula para que funcione correctamente 29 00:02:45,300 --> 00:02:53,880 allí y también debemos asegurarnos de que presionar esto nos navegue. Ahora para eso, pasaré los datos que necesitamos allí, que es 30 00:02:53,880 --> 00:03:01,140 el título, así que es itemData. articulo. título y ahora es un 31 00:03:01,140 --> 00:03:08,910 accesorio que podemos usar en el mosaico de cuadrícula de categoría y también quiero pasar otro accesorio que pasa 32 00:03:08,940 --> 00:03:18,240 en una función que luego podemos ejecutar para navegar y nombraré esto en Select pero puedes nombrar esto como quieras y allí, 33 00:03:18,240 --> 00:03:26,700 solo quiero ejecutar el código que actualmente ejecuto en onPress. Así que cortaré esto desde aquí fuera del mosaico de cuadrícula 34 00:03:26,700 --> 00:03:33,000 de categorías, lo moveré nuevamente a la pantalla de categorías, a esta función que paso a onSelect y 35 00:03:33,000 --> 00:03:38,700 ahora todo lo que tenemos que hacer es activar onSelect desde el interior del mosaico de 36 00:03:38,730 --> 00:03:48,110 cuadrícula de categorías, eso es, por supuesto un patrón normal que sabrías de React. Entonces, de vuelta en el mosaico de cuadrícula de categoría, onPress puede simplemente apuntar a los 37 00:03:48,320 --> 00:03:52,390 accesorios onSelect para activar la función que se pasa en el accesorio onSelect. 38 00:03:52,550 --> 00:03:57,370 Ahora el título que estoy publicando aquí también puede ser solo accesorios. título porque estamos obteniendo este accesorio 39 00:03:57,380 --> 00:04:03,380 de título como un accesorio en nuestro mosaico de cuadrícula de categoría, lo estamos pasando aquí. 40 00:04:05,100 --> 00:04:11,460 Con eso, dividimos nuestro componente un poco, pero por supuesto ahora también quiero trabajar 41 00:04:11,460 --> 00:04:17,130 un poco más en el estilo. Entonces, de vuelta en el mosaico de cuadrícula de 42 00:04:17,130 --> 00:04:21,580 categoría, por ejemplo, quiero usar el color que estoy configurando porque cada categoría obtiene un color almacenado 43 00:04:21,660 --> 00:04:28,620 en esa propiedad de color aquí, por lo que sería bueno usar eso. Por lo tanto, también podemos reenviar el mosaico de cuadrícula de categoría, reenviar el color aquí, 44 00:04:28,620 --> 00:04:34,070 por supuesto, puede nombrar este accesorio como desee en el elemento. propiedad de color 45 00:04:34,200 --> 00:04:40,950 y aquí, tiene que ser. color porque nombramos el color de la propiedad aquí en el modelo y ahora 46 00:04:40,950 --> 00:04:44,360 en un mosaico de cuadrícula de categoría, podemos usar ese color para darle estilo aquí. 47 00:04:44,460 --> 00:04:50,760 Entonces, ¿cómo diseñar esto, cómo debería ser esto? Al agregar un estilo a la vista que tenemos 48 00:04:50,760 --> 00:04:56,460 dentro de la opacidad táctil porque el componente de opacidad táctil en sí es invisible pero 49 00:04:56,460 --> 00:05:01,250 la vista no está ahí, podemos pasar un objeto y establecer el color de 50 00:05:01,260 --> 00:05:04,620 fondo aquí como accesorios. color. 51 00:05:04,740 --> 00:05:08,860 Bueno, veamos cómo se ve eso, si guardamos eso y esperamos que se vuelva a cargar, 52 00:05:08,950 --> 00:05:11,080 no se ve tan mal pero es 53 00:05:11,110 --> 00:05:15,970 demasiado pequeño, debe completar todo el elemento de la cuadrícula y no solo la fila con el texto allí. 54 00:05:16,180 --> 00:05:25,210 Entonces, para mejorar eso, realmente tendré este estilo en línea aquí, pero lo fusionaré en un objeto circundante con otra 55 00:05:25,210 --> 00:05:33,770 configuración de estilo que configuré en la hoja de estilo y nombraré este contenedor, puede nombrarlo como quiera querer, 56 00:05:33,790 --> 00:05:35,610 contenedor de estilos, 57 00:05:35,680 --> 00:05:39,270 extraiga todos los pares clave-valor para que combinemos 58 00:05:39,620 --> 00:05:47,450 estos estilos aquí y ahora, el contenedor es un objeto de hoja de estilo que podemos agregar allí 59 00:05:47,540 --> 00:05:54,530 y aquí, podemos configurar uno flexible para asegurarnos de que cada elemento llena todo el espacio 60 00:05:54,530 --> 00:05:58,880 que tiene y ahora esto se ve mucho mejor. 61 00:05:59,030 --> 00:06:02,330 Ahora todavía no estoy 100% contento, quiero 62 00:06:03,080 --> 00:06:10,080 agregar un poco de radio de borde aquí, digamos de 10 para tener algunas esquinas redondeadas y, 63 00:06:10,400 --> 00:06:14,310 por supuesto, puedes configurar cualquier estilo que quieras aquí, 64 00:06:14,570 --> 00:06:28,320 prefieres, yo también configurará un color de sombra de negro y una opacidad de sombra de. 26 y un desplazamiento de sombra de ancho 0, altura 2 y un radio de sombra 65 00:06:28,380 --> 00:06:37,010 de 10 y una elevación de 3, elevación para Android si recuerdas porque estas propiedades de sombra solo afectan a 66 00:06:37,020 --> 00:06:42,720 iOS, por lo que obtenemos un poco de esta tarjeta tridimensional mira 67 00:06:42,810 --> 00:06:48,680 y, por supuesto, como mencioné, puedes diseñar esto de la forma que quieras. 68 00:06:48,690 --> 00:06:54,240 Ahora, además, quiero asegurarme de que este texto aquí se encuentra en la esquina inferior derecha y 69 00:06:54,240 --> 00:06:55,380 tiene un poco 70 00:06:55,380 --> 00:07:00,960 de relleno, por supuesto, un poco de espacio alrededor. Entonces agregaré un poco de relleno aquí, digamos de 10 71 00:07:01,140 --> 00:07:08,730 y ahora establezca el contenido de justificación en el extremo flexible, la dirección de flexión en el contenedor, por supuesto, es de arriba a abajo porque es 72 00:07:08,730 --> 00:07:14,340 una columna, por lo que el extremo flexible lo moverá al abajo aquí y ahora para moverlo también a la 73 00:07:14,340 --> 00:07:17,100 derecha en el eje horizontal, configuro alinear elementos 74 00:07:17,220 --> 00:07:22,770 al extremo flexible también y esto lo mueve al final del eje transversal que se deja de derecha a 75 00:07:22,800 --> 00:07:29,900 derecha en una vista normal donde no Cambiar la dirección de flexión. Con eso, obtenemos este aspecto que diría que es mejor, 76 00:07:29,930 --> 00:07:36,230 pero por supuesto, el texto aquí, el estilo del texto también podría cambiar y un poco más de relleno 77 00:07:36,230 --> 00:07:37,430 podría verse bien, 78 00:07:37,430 --> 00:07:43,100 tal vez 15, pero por supuesto podemos experimentar con eso y también Una nota al margen importante, 79 00:07:43,100 --> 00:07:47,330 en esta aplicación no me enfocaré en construir una experiencia totalmente receptiva 80 00:07:47,330 --> 00:07:53,450 aquí, trataré de mantener esto breve y conciso porque el enfoque principal de este módulo, por supuesto, es 81 00:07:53,690 --> 00:07:58,720 la navegación, por lo tanto, no optimizaré esto para todas las posibles pantallas y plataformas. 82 00:07:58,720 --> 00:08:01,200 Esto es algo que, por supuesto, puede hacer 83 00:08:01,250 --> 00:08:06,860 como práctica, no adheriré a no hinchar innecesariamente este módulo, así que simplemente configuraré un estilo que se 84 00:08:06,860 --> 00:08:08,450 vea bien en estos emuladores. 85 00:08:08,450 --> 00:08:14,520 Dicho esto, un poco más de relleno podría tener sentido y también quiero diseñar 86 00:08:14,720 --> 00:08:17,740 el título aquí, por lo tanto, agregaré, 87 00:08:17,810 --> 00:08:19,330 digamos, estilo de 88 00:08:19,430 --> 00:08:22,040 título aquí, configurado en la hoja 89 00:08:22,040 --> 00:08:28,670 de estilo, agregué aquí y allá, quiero usar mi familia de fuentes, abierta sin negrita, que 90 00:08:28,670 --> 00:08:39,110 puedo usar, por supuesto, porque la estoy registrando aquí en la aplicación. js, por lo que ahora se agrega open sans bold aquí y tal vez también cambie el tamaño de 91 00:08:39,110 --> 00:08:42,870 la fuente un poco a 22. Guardamos esto, esto 92 00:08:42,880 --> 00:08:45,340 se ve bastante decente. 93 00:08:45,470 --> 00:08:48,560 Ahora hay una última cosa que quiero hacer 94 00:08:49,750 --> 00:08:58,330 en el mosaico de la cuadrícula de categoría, en el texto aquí, estableceré el número de líneas en 2 para que cualquier texto que sea más 95 00:08:58,330 --> 00:09:07,800 largo que eso se corte, lo que creo que se ve un poco mejor Y por último, pero no menos importante, puede notar que 96 00:09:07,870 --> 00:09:14,560 en Android es ligero y encantador, esto está a la izquierda aquí porque está dividido en 97 00:09:14,560 --> 00:09:19,670 dos líneas, para asegurarse de que esto también esté a la derecha, 98 00:09:19,720 --> 00:09:27,900 en el título aquí, estableceré el texto se alinea a la derecha para forzar que esto esté a la derecha. 99 00:09:28,000 --> 00:09:30,420 Así que esperemos a que se vuelva 100 00:09:33,070 --> 00:09:35,720 a cargar y ahora se ve como debería. 101 00:09:35,720 --> 00:09:38,020 Ahora eso no está tan mal 102 00:09:38,060 --> 00:09:43,850 aquí, ahora puedes notar que el efecto se ve un poco extraño si toco un elemento aquí, 103 00:09:43,850 --> 00:09:46,520 obtenemos este extraño borde extra a su alrededor. 104 00:09:46,550 --> 00:09:53,750 Ahora, una cosa que aún haré aquí, que es totalmente opcional, pero aún así, lo agregaré aquí, agregaré la API de 105 00:09:53,750 --> 00:10:00,710 la plataforma y también agregaré comentarios nativos táctiles para usar realmente el efecto dominó en lugar de la opacidad táctil 106 00:10:00,710 --> 00:10:02,090 si es compatible. 107 00:10:02,090 --> 00:10:11,600 Así que aquí, tendré mi componente táctil que, por defecto, es la 108 00:10:11,790 --> 00:10:21,510 opacidad táctil pero si la plataforma. os es igual a Android y, como aprendiste anteriormente en el curso, la versión es 109 00:10:21,510 --> 00:10:26,340 mayor o igual que 21, entonces sabemos que la retroalimentación nativa táctil es compatible, por 110 00:10:26,340 --> 00:10:31,100 lo que estableceré el componente táctil igual a la retroalimentación nativa táctil, como esta. 111 00:10:31,290 --> 00:10:35,820 Use el componente táctil aquí en lugar de la opacidad táctil 112 00:10:35,820 --> 00:10:38,730 y con eso, deberíamos tener un buen 113 00:10:38,730 --> 00:10:41,000 efecto dominó en Android, 114 00:10:41,130 --> 00:10:46,070 en iOS tenemos el efecto de opacidad que queremos y en Android, 115 00:10:46,080 --> 00:10:50,520 ahora tenemos un efecto dominó pero el estilo está apagado ahora. 116 00:10:50,550 --> 00:10:57,830 Sin embargo, esto es algo que podemos solucionar agregando una vista adicional alrededor de esto que recibe nuestro estilo de 117 00:10:57,840 --> 00:11:01,840 elementos de cuadrícula en lugar del componente táctil aquí y 118 00:11:02,010 --> 00:11:08,220 con eso, solo necesitamos agregar una propiedad de estilo adicional en el componente táctil y establecer uno 119 00:11:08,220 --> 00:11:08,700 flexible. 120 00:11:08,730 --> 00:11:10,430 Lo estoy haciendo con un estilo en 121 00:11:10,440 --> 00:11:16,770 línea aquí rápido y sucio, podría agregar un estilo separado en la hoja de estilos. Con eso se ve y se siente igual 122 00:11:16,800 --> 00:11:17,800 en iOS 123 00:11:17,910 --> 00:11:21,370 y ahora también en Android, el efecto dominó está ahí. 124 00:11:21,370 --> 00:11:27,870 Sin embargo, ahora no está utilizando nuestras esquinas redondeadas, sino que representa un cuadrado o un rectángulo y también 125 00:11:28,080 --> 00:11:31,100 aprendió anteriormente cómo solucionarlo. Para solucionarlo, todo lo que 126 00:11:31,110 --> 00:11:35,820 tenemos que hacer es en el elemento de la cuadrícula, agregamos el radio del 127 00:11:35,910 --> 00:11:42,930 borde de 10 y luego agregamos un desbordamiento oculto para asegurarnos de que los elementos secundarios no se puedan representar fuera de 128 00:11:42,930 --> 00:11:43,950 esa vista 129 00:11:43,950 --> 00:11:49,010 envolvente, lo que significa que la ondulación el efecto no puede salir de esa caja redondeada. 130 00:11:49,020 --> 00:11:54,540 Ahora tenemos ese aspecto y ese es el único ajuste que quiero hacer aquí para diferentes plataformas y 131 00:11:54,540 --> 00:11:58,050 con eso, eso no se ve tan mal, diría yo. 132 00:11:58,050 --> 00:12:04,110 Ahora, por supuesto, puede modificar el aspecto de eso, puede modificar el tamaño de fuente y así sucesivamente, hacer que se 133 00:12:04,110 --> 00:12:07,080 vea realmente bien en sus dispositivos que está probando. 134 00:12:07,080 --> 00:12:11,940 Estoy contento con este aspecto y ahora es el momento de mostrar algunas recetas cuando 135 00:12:11,970 --> 00:12:13,470 seleccionamos una categoría aquí.