1 00:00:02,400 --> 00:00:06,680 Ahora con las pestañas agregadas, nos falta contenido en la pantalla favorita. 2 00:00:06,740 --> 00:00:12,960 Ahora todavía no tenemos la funcionalidad para agregar favoritos, si hacemos clic en el ícono de la estrella, eso no 3 00:00:12,960 --> 00:00:13,640 hace nada 4 00:00:13,650 --> 00:00:16,370 y, por cierto, sé que también nos falta contenido 5 00:00:16,380 --> 00:00:17,680 aquí, agregaremos esto luego. 6 00:00:17,880 --> 00:00:22,140 Por lo tanto, hacer clic en el ícono de estrella aún no hace nada y 7 00:00:22,140 --> 00:00:23,370 solo podremos hacer eso 8 00:00:23,490 --> 00:00:29,040 un poco más tarde, aún así quiero llenar esta pantalla favorita un poco más al menos con algunas comidas 9 00:00:29,040 --> 00:00:30,340 ficticias que estamos cargando allí 10 00:00:30,480 --> 00:00:35,640 digamos y al menos con la funcionalidad de ir también a la pantalla MealDetailScreen porque al final, la 11 00:00:35,640 --> 00:00:39,080 idea aquí es que tenemos una lista de comidas aquí, tal como 12 00:00:39,090 --> 00:00:44,460 la tenemos aquí después de seleccionar una categoría y que podemos hacer clic en una comida para ir a 13 00:00:44,460 --> 00:00:45,620 la página de detalles, 14 00:00:45,660 --> 00:00:50,940 tal como podemos hacerlo en el navegador de comidas, así que en el navegador de la pila de 15 00:00:50,940 --> 00:00:58,620 comidas debería decir y, por lo tanto, al final, lo que necesitamos para favoritos, para nuestra pestaña de favoritos no es una sola pantalla pero otra pila, 16 00:00:58,620 --> 00:00:59,330 una 17 00:00:59,340 --> 00:01:02,750 pila para nuestra función de favoritos en esta aplicación, eso es 18 00:01:02,760 --> 00:01:06,960 lo que necesitamos aquí, esto también nos dará un encabezado que también nos falta. 19 00:01:07,470 --> 00:01:10,020 Por supuesto, eso no es 20 00:01:10,110 --> 00:01:18,500 demasiado difícil de implementar, simplemente podemos crear otro navegador de pila encima de nuestro tabScreenConfig y esto configurará el navegador 21 00:01:18,500 --> 00:01:21,390 de pila para nuestra pila de favoritos. 22 00:01:21,530 --> 00:01:26,630 Entonces, el objeto que pasamos aquí tiene que definir todas las pantallas que queremos tener en 23 00:01:26,630 --> 00:01:30,830 esa pila y esa sería la pantalla de favoritos en sí con la 24 00:01:30,830 --> 00:01:36,470 lista de nuestras comidas favoritas y allí quiero señalar la pantalla de favoritos y luego quiero tener un 25 00:01:36,710 --> 00:01:42,710 detalle de comida y apuntaré a MealDetailScreen y ya estamos usando MealDetailScreen aquí en nuestro navegador de comidas, en 26 00:01:42,710 --> 00:01:44,000 nuestro otro navegador de 27 00:01:44,030 --> 00:01:45,230 pila, pero eso 28 00:01:45,230 --> 00:01:49,030 está muy bien, puedes usar una misma pantalla en diferentes navegadores de 29 00:01:49,040 --> 00:01:51,540 pila, no hay nada de malo en ese. 30 00:01:51,710 --> 00:01:58,340 Así que podemos usar MealDetailScreen aquí también en el navegador de pila de favoritos y ahora solo quiero asegurarme de 31 00:01:58,340 --> 00:02:03,550 que también copie mis opciones aquí, mis opciones de navegación predeterminadas, este segundo argumento en 32 00:02:03,560 --> 00:02:09,170 realidad para crear un navegador de pila, para el navegador de comidas a mis favoritos navegador de 33 00:02:09,170 --> 00:02:10,070 pila también. 34 00:02:10,070 --> 00:02:15,680 Así que aquí, como segundo argumento para crear el navegador de pila, copio en 35 00:02:15,680 --> 00:02:22,430 ese objeto donde configuro mis opciones de navegación predeterminadas para que para esta pila, tenga los mismos valores 36 00:02:22,430 --> 00:02:29,330 predeterminados, tenga el mismo estilo de encabezado y, por lo tanto, también podemos corte esto desde aquí y 37 00:02:29,330 --> 00:02:39,100 elimine esto desde aquí y almacene esa configuración predeterminada en una constante aquí, tal vez nuestro defaultStackNavOptions, ese es el objeto que configura el estilo del 38 00:02:39,330 --> 00:02:45,670 encabezado y luego podemos usar el defaultStackNavOptions aquí en nuestra pila de navegador de comidas y 39 00:02:45,840 --> 00:02:52,800 también aquí en nuestro Navegador de pila de favoritos y también lo guardaré en la constante FavNavigator, por supuesto, 40 00:02:52,800 --> 00:02:55,330 puedes nombrar esta constante como quieras. 41 00:02:55,410 --> 00:02:57,230 Ahora es ese FavNavigator, por lo 42 00:02:57,270 --> 00:03:03,890 que creó el componente del navegador de pila al final que quiero usar en mi tabScreenConfig, allí para las comidas ya estábamos 43 00:03:03,920 --> 00:03:09,420 usando el navegador de pila, para los favoritos estaba usando la pantalla de favoritos y esto ahora tiene 44 00:03:09,420 --> 00:03:10,720 que cambiar, esto 45 00:03:10,720 --> 00:03:16,620 ahora debería ser el FavNavigator, de modo que aquí también usemos una pila en lugar de una sola pantalla. 46 00:03:16,680 --> 00:03:23,220 Y con eso ya, si vamos a favoritos, tenemos nuestro título aquí, al menos tenemos un encabezado que 47 00:03:23,220 --> 00:03:27,000 ya demuestra que estamos usando un navegador de pila aquí. 48 00:03:27,080 --> 00:03:31,870 Ahora, por supuesto, una pantalla no es realmente tan útil, no es algo que quiera decir aquí, 49 00:03:31,920 --> 00:03:37,500 así que quiero establecer opciones de navegación específicas para la pantalla favorita y podemos usarla aquí cuando creamos el navegador 50 00:03:37,560 --> 00:03:43,290 de pila de favoritos con la forma más larga. donde configuramos la pantalla y las opciones de navegación para esa 51 00:03:43,290 --> 00:03:47,340 pantalla aquí o lo hacemos directamente en nuestro componente, eso es lo que hice 52 00:03:47,370 --> 00:03:48,570 hasta ahora, eso 53 00:03:48,600 --> 00:03:50,330 es lo que haré aquí también. 54 00:03:50,340 --> 00:03:55,560 Allí podemos configurar FavoritosScreen. Opciones de navegación como esta, use el 55 00:03:55,740 --> 00:03:57,610 objeto aquí, no necesitamos 56 00:03:57,630 --> 00:04:03,900 la función porque no derivaré el nombre dinámicamente aquí y en las opciones de navegación aquí, 57 00:04:03,900 --> 00:04:11,700 simplemente estableceré el título del encabezado en sus favoritos y, por supuesto, puede elegir cualquier texto que desee aquí y 58 00:04:11,700 --> 00:04:12,210 si 59 00:04:12,330 --> 00:04:17,880 ahora lo guardamos, ahora vemos nuestro título personalizado aquí, que es un poco mejor. 60 00:04:17,880 --> 00:04:24,090 Ahora, como dije, todavía no tenemos las herramientas para almacenar las comidas como favoritas, eso es algo 61 00:04:24,090 --> 00:04:26,410 que haremos en un tiempo. 62 00:04:26,430 --> 00:04:29,160 Entonces, por ahora, solo quiero mostrar algunas 63 00:04:29,160 --> 00:04:36,000 comidas falsas aquí, digamos las comidas con la ID M1 y M2, simplemente dos comidas falsas y para eso, podemos 64 00:04:36,000 --> 00:04:41,670 ir a la pantalla favorita y en lugar de mostrar esta vista aquí, en el final 65 00:04:41,670 --> 00:04:45,000 Quiero mostrar lo mismo que en la pantalla de 66 00:04:45,000 --> 00:04:51,480 categoría de comidas, a la derecha, quiero representar una FlatList que luego muestra mis elementos de comida aquí. 67 00:04:51,480 --> 00:04:53,620 La única diferencia es qué comidas 68 00:04:53,640 --> 00:04:58,300 ofrezco, esa lógica no será la misma porque eso es diferente para mi pantalla favorita. 69 00:04:58,320 --> 00:05:03,480 Sin embargo, esto será lo mismo y dado que reutilizaré esa lógica de creación de lista 70 00:05:03,480 --> 00:05:09,570 y lo único que difiere es la información que proporciono, tendría sentido externalizar esta lista en un componente separado, para 71 00:05:09,750 --> 00:05:15,140 que podamos reutilizar el componente en el categoría comidas en pantalla y en la pantalla de favoritos. 72 00:05:15,180 --> 00:05:20,970 Entonces, en la carpeta de componentes, agregaré una MealList. js y allí, quiero tener un componente 73 00:05:21,000 --> 00:05:30,210 React, así que importe React desde React y también tendremos que importar FlatList desde react-native y también tendremos que importar hojas de estilo desde react-native, 74 00:05:30,210 --> 00:05:34,470 por supuesto, y luego aquí , podemos crear nuestro componente de 75 00:05:34,470 --> 00:05:42,500 lista de comidas donde obtenemos accesorios y exportamos eso de forma predeterminada a partir de entonces, también necesitaremos algunos estilos para 76 00:05:42,500 --> 00:05:43,180 que 77 00:05:43,190 --> 00:05:49,940 ya podamos agregar la hoja de estilo crear aquí así y ahora quiero mover mi lógica de lista 78 00:05:49,940 --> 00:05:56,690 de categoría pantalla de comida en este nuevo componente. Así que cortaré todo este código jsx que devuelvo 79 00:05:56,930 --> 00:06:04,640 aquí en la pantalla de comida de categoría y lo moveré aquí y lo devolveré en el componente de la 80 00:06:04,910 --> 00:06:06,380 lista de comidas. 81 00:06:06,380 --> 00:06:08,720 Así que ahora aquí, devolveré esa vista 82 00:06:08,720 --> 00:06:16,000 y, por lo tanto, también tenemos que importar la vista aquí, por supuesto. Eso también significa que tenemos que traer el aspecto, por lo que aquí este 83 00:06:16,000 --> 00:06:21,340 estilo de pantalla también se puede cortar de las comidas de categoría y, por lo tanto, aquí, ya no necesitamos una 84 00:06:21,340 --> 00:06:22,370 hoja de estilo, 85 00:06:22,480 --> 00:06:24,700 podemos deshacernos de la importación de la hoja 86 00:06:24,700 --> 00:06:29,650 de estilo, también podemos deshacerse de todas las importaciones de React Native porque ya no tenemos ningún componente específico 87 00:06:29,680 --> 00:06:37,000 de React Native aquí y, en su lugar, moverlo a la lista de comidas. Entonces, en la hoja de estilo, puedo agregar esta pantalla que acabo 88 00:06:37,000 --> 00:06:42,540 de eliminar y un nombre más apropiado, por lo tanto, probablemente sea listas, por lo que cambiaré el nombre, 89 00:06:42,610 --> 00:06:47,590 técnicamente no es necesario cambiar el nombre, pero tiene sentido porque ahora no es un componente 90 00:06:47,590 --> 00:06:52,570 de la pantalla, solo representa una lista que luego es la única parte en nuestra pantalla, 91 00:06:52,570 --> 00:06:56,590 pero esa es una historia diferente. Así que solo nombraré esta lista, tengo mi FlatList allí. 92 00:06:57,960 --> 00:07:02,240 Ahora, por supuesto, muestra las comidas que quiero representar, que ya no funcionarán, en 93 00:07:02,240 --> 00:07:09,170 cambio, simplemente espero obtener algunos datos de mis accesorios aquí, tal vez nombrarlos datos de la lista, puede elegir el nombre que desee aquí, 94 00:07:09,170 --> 00:07:15,380 por supuesto, y renderizar artículo de comida, eso también falta. Para eso en la categoría de comidas, podemos 95 00:07:16,190 --> 00:07:17,030 reducir este 96 00:07:17,040 --> 00:07:20,570 elemento de comida constante aquí, cortarlo de la pantalla 97 00:07:20,570 --> 00:07:25,250 de comidas de categoría y pasarlo a nuestra lista de comidas también. 98 00:07:25,250 --> 00:07:27,240 Entonces, en el componente de la 99 00:07:27,290 --> 00:07:33,890 lista de comidas, agregaré esta constante que contiene esta función de procesamiento de elementos de comida que tiene todo lo que 100 00:07:34,160 --> 00:07:37,650 necesita para funcionar, excepto por una cosa, falta la importación del 101 00:07:37,760 --> 00:07:49,160 artículo de comida, por lo que debemos importar el artículo de comida. / MealItem, así que desde el componente del elemento de comida. Otra cosa también faltará aquí en el componente de la lista 102 00:07:49,160 --> 00:07:51,470 de comidas y ese será el 103 00:07:51,470 --> 00:07:56,300 accesorio de navegación porque, como mencioné, el accesorio de navegación solo está disponible en 104 00:07:56,300 --> 00:08:02,390 componentes que se cargan con la ayuda de un navegador por React navigation y solo en ese componente, 105 00:08:02,420 --> 00:08:04,100 no en componentes anidados. 106 00:08:04,100 --> 00:08:09,620 Entonces, la categoría de comidas es el componente que estamos cargando con la ayuda del navegador y si 107 00:08:09,620 --> 00:08:12,630 luego usamos la lista de comidas allí que haremos en 108 00:08:12,690 --> 00:08:18,920 un segundo, la lista de comidas no tendrá acceso a la navegación de accesorios, solo el componente cargado directamente tiene acceso, 109 00:08:19,400 --> 00:08:21,790 pero será un problema fácil de resolver. 110 00:08:21,890 --> 00:08:30,530 En primer lugar, sin embargo, importemos la lista de comidas aquí desde el componente de la lista de comidas y regresemos la lista de comidas 111 00:08:30,650 --> 00:08:38,690 aquí en el componente de comidas de categoría y ahora la lista de comidas, por supuesto, necesita esa información de la lista con 112 00:08:38,690 --> 00:08:39,920 la que estamos trabajando, 113 00:08:39,920 --> 00:08:46,900 así que pasemos los datos de la lista y eso debería apuntar simplemente a la matriz que queremos renderizar, que 114 00:08:46,900 --> 00:08:48,130 en este caso 115 00:08:48,140 --> 00:08:53,110 muestra comidas y ahora, como mencioné, tendremos un problema con el accesorio de navegación, 116 00:08:53,260 --> 00:09:00,760 bueno, podemos enviarlo, podemos usar la navegación, agregar este accesorio aquí para la lista de comidas y la navegación de accesorios 117 00:09:00,790 --> 00:09:01,960 hacia adelante, 118 00:09:01,960 --> 00:09:06,170 así de fácil podemos enviar esto a la lista de comidas. 119 00:09:06,200 --> 00:09:11,660 Entonces, ahora en la lista de comidas, en ese componente, tendremos un accesorio de navegación nuevamente porque 120 00:09:11,660 --> 00:09:16,940 lo estamos reenviando, estamos agregando nuestro propio accesorio de navegación y estamos apuntando a los datos 121 00:09:16,940 --> 00:09:18,810 que obtenemos en el accesorio de 122 00:09:18,890 --> 00:09:20,480 navegación proporcionado por React 123 00:09:20,540 --> 00:09:26,850 navegación, así es como tenemos acceso a él nuevamente aquí y con eso, deberíamos tener una configuración que funcione, así 124 00:09:27,240 --> 00:09:33,570 que esa debería ser nuestra categoría de pantalla de comidas. Vamos a guardarlo e ignoraremos la pantalla favorita 125 00:09:33,570 --> 00:09:40,110 por el momento y solo veremos que nuestro navegador de pila todavía funciona y parece hacer eso, 126 00:09:40,160 --> 00:09:48,820 si lo pruebo, definitivamente todavía funciona aquí como lo era antes. Ahora asegurémonos de usar esto también en la 127 00:09:48,820 --> 00:09:50,620 pantalla favorita. 128 00:09:50,620 --> 00:09:55,320 Entonces, aquí en la pantalla de favoritos, no necesitamos importar nada de React Native, solo necesitamos 129 00:09:55,330 --> 00:10:01,270 importar el componente de la lista de comidas que acabamos de crear a partir de los componentes y luego la lista 130 00:10:01,600 --> 00:10:06,670 de comidas y simplemente devolver la lista de comidas y ahora la diferencia a la categoría La pantalla 131 00:10:06,730 --> 00:10:11,500 de comidas donde también devolvemos la lista de comidas es, por supuesto, los datos que queremos representar, 132 00:10:11,510 --> 00:10:12,150 la 133 00:10:12,190 --> 00:10:14,410 lógica para derivar esos datos, esa es la 134 00:10:14,410 --> 00:10:15,880 diferencia y otra diferencia entre 135 00:10:15,880 --> 00:10:20,250 los componentes es, por supuesto, nuestra configuración de opciones de navegación y el título del 136 00:10:20,260 --> 00:10:21,450 encabezado que estamos configurando. 137 00:10:22,030 --> 00:10:26,680 Podemos deshacernos de la hoja de estilo aquí, ya no la necesitamos aquí en la 138 00:10:26,680 --> 00:10:27,820 pantalla favorita y 139 00:10:27,970 --> 00:10:30,010 ahora los datos que quiero representar, 140 00:10:30,100 --> 00:10:31,960 eso depende de mis comidas, 141 00:10:34,440 --> 00:10:42,060 por lo que importaré comidas de, ahora desde los datos ficticios . js y como mencioné, aquí ya que no tenemos una 142 00:10:42,080 --> 00:10:47,120 forma real de establecer favoritos, solo usaré algunos favoritos ficticios que se me ocurrieron. 143 00:10:47,160 --> 00:10:55,710 Entonces, aquí, mis comidas favoritas, esa podría ser mi variedad de comidas y allí quiero filtrar para dos comidas específicas, así que echaré un 144 00:10:55,860 --> 00:10:57,500 vistazo a cada comida 145 00:10:57,540 --> 00:11:05,510 pero solo vuelvo verdadero si la comida. id es igual a M1 o si es comida. id es igual a M2 y, por 146 00:11:05,520 --> 00:11:09,480 supuesto, es solo una lógica ficticia para que tengamos algo aquí, 147 00:11:09,600 --> 00:11:15,330 lo reemplazaremos más adelante una vez que realmente sepamos cómo administrar nuestro estado y cómo 148 00:11:15,330 --> 00:11:17,580 administrar los favoritos establecidos actualmente. 149 00:11:17,610 --> 00:11:23,730 Ahora a la lista de comidas, a nuestro componente aquí, podemos reenviar el 150 00:11:23,820 --> 00:11:36,840 soporte de datos de la lista nuevamente que necesitamos allí, para que podamos reenviar los datos de la lista y establecer esto igual a comidas favoritas, así como así. 151 00:11:36,850 --> 00:11:38,980 Así que ahora también deberíamos tener algunos 152 00:11:39,010 --> 00:11:40,990 favoritos y los tenemos, tenemos dos 153 00:11:40,990 --> 00:11:47,440 favoritos, sin embargo, si hago clic en él, quedamos indefinidos, no es un objeto en el que intentamos llamar a la navegación 154 00:11:48,670 --> 00:11:54,520 de accesorios y sí, el problema, por supuesto, es que en la lista de comidas, como mencioné, estamos usando el 155 00:11:54,550 --> 00:11:59,560 accesorio de navegación y eso solo está disponible en el componente que se carga directamente a través 156 00:11:59,590 --> 00:12:05,440 de un navegador, por lo que en este caso esa es la pantalla favorita y en la categoría comidas, resolvemos 157 00:12:05,440 --> 00:12:11,080 esto reenviando la navegación utilería, por supuesto, necesitamos hacer lo mismo aquí para nuestra pantalla favorita, por lo que 158 00:12:11,080 --> 00:12:17,170 debemos proporcionar esa utilería de navegación aquí en la lista de comidas y la navegación de utilería delantera para que esa 159 00:12:17,170 --> 00:12:22,800 utilería de navegación con el método de navegación esté disponible en el componente de la lista de comidas también. 160 00:12:22,870 --> 00:12:29,940 Ahora con eso, si vamos a favoritos, de hecho podemos ir a la pantalla de detalles. 161 00:12:30,130 --> 00:12:37,690 Entonces esto está funcionando, eso es bastante decente, bastante agradable. Como puede ver, estos dos navegadores de la pila también funcionan de forma independiente, podemos estar 162 00:12:37,720 --> 00:12:38,700 en la pantalla 163 00:12:38,700 --> 00:12:44,200 de detalles en ambas pilas por separado, aquí estoy en la pantalla de detalles del salmón en la pestaña de comidas y puedo 164 00:12:44,470 --> 00:12:50,410 ir a la tostada hawaii pantalla de detalles en la pestaña de favoritos. Podemos volver aquí en la pestaña de comidas y todavía 165 00:12:50,530 --> 00:12:54,840 estoy en la página de detalles de tostadas hawaii aquí en la pila de favoritos. 166 00:12:54,940 --> 00:12:57,670 Entonces, estas dos pilas funcionan por separado, totalmente independientes 167 00:12:57,700 --> 00:13:00,350 y así es como debe ser, y así es 168 00:13:00,610 --> 00:13:06,130 como podemos reutilizar algo de lógica y cómo podemos tener diferentes pilas combinadas en el mismo navegador de 169 00:13:06,130 --> 00:13:07,760 pestañas y aunque todavía 170 00:13:07,810 --> 00:13:11,900 falta algo de lógica , la lógica para agregar realmente favoritos, este es un 171 00:13:11,950 --> 00:13:17,620 gran paso adelante y con suerte le muestra el poder de la navegación React y cómo configurar este patrón 172 00:13:17,620 --> 00:13:24,490 de navegación común donde tiene pestañas y luego diferentes pilas anidadas. Falta un patrón de navegación que quiero mostrarle y 173 00:13:24,490 --> 00:13:25,920 ese es un 174 00:13:26,080 --> 00:13:27,210 cajón lateral.