Ahora con las pestañas agregadas, nos falta contenido en la pantalla favorita.
Ahora todavía no tenemos la funcionalidad para agregar favoritos, si hacemos clic en el ícono de la estrella, eso no
hace nada
y, por cierto, sé que también nos falta contenido
aquí, agregaremos esto luego.
Por lo tanto, hacer clic en el ícono de estrella aún no hace nada y
solo podremos hacer eso
un poco más tarde, aún así quiero llenar esta pantalla favorita un poco más al menos con algunas comidas
ficticias que estamos cargando allí
digamos y al menos con la funcionalidad de ir también a la pantalla MealDetailScreen porque al final, la
idea aquí es que tenemos una lista de comidas aquí, tal como
la tenemos aquí después de seleccionar una categoría y que podemos hacer clic en una comida para ir a
la página de detalles,
tal como podemos hacerlo en el navegador de comidas, así que en el navegador de la pila de
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,
una
pila para nuestra función de favoritos en esta aplicación, eso es
lo que necesitamos aquí, esto también nos dará un encabezado que también nos falta.
Por supuesto, eso no es
demasiado difícil de implementar, simplemente podemos crear otro navegador de pila encima de nuestro tabScreenConfig y esto configurará el navegador
de pila para nuestra pila de favoritos.
Entonces, el objeto que pasamos aquí tiene que definir todas las pantallas que queremos tener en
esa pila y esa sería la pantalla de favoritos en sí con la
lista de nuestras comidas favoritas y allí quiero señalar la pantalla de favoritos y luego quiero tener un
detalle de comida y apuntaré a MealDetailScreen y ya estamos usando MealDetailScreen aquí en nuestro navegador de comidas, en
nuestro otro navegador de
pila, pero eso
está muy bien, puedes usar una misma pantalla en diferentes navegadores de
pila, no hay nada de malo en ese.
Así que podemos usar MealDetailScreen aquí también en el navegador de pila de favoritos y ahora solo quiero asegurarme de
que también copie mis opciones aquí, mis opciones de navegación predeterminadas, este segundo argumento en
realidad para crear un navegador de pila, para el navegador de comidas a mis favoritos navegador de
pila también.
Así que aquí, como segundo argumento para crear el navegador de pila, copio en
ese objeto donde configuro mis opciones de navegación predeterminadas para que para esta pila, tenga los mismos valores
predeterminados, tenga el mismo estilo de encabezado y, por lo tanto, también podemos corte esto desde aquí y
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
encabezado y luego podemos usar el defaultStackNavOptions aquí en nuestra pila de navegador de comidas y
también aquí en nuestro Navegador de pila de favoritos y también lo guardaré en la constante FavNavigator, por supuesto,
puedes nombrar esta constante como quieras.
Ahora es ese FavNavigator, por lo
que creó el componente del navegador de pila al final que quiero usar en mi tabScreenConfig, allí para las comidas ya estábamos
usando el navegador de pila, para los favoritos estaba usando la pantalla de favoritos y esto ahora tiene
que cambiar, esto
ahora debería ser el FavNavigator, de modo que aquí también usemos una pila en lugar de una sola pantalla.
Y con eso ya, si vamos a favoritos, tenemos nuestro título aquí, al menos tenemos un encabezado que
ya demuestra que estamos usando un navegador de pila aquí.
Ahora, por supuesto, una pantalla no es realmente tan útil, no es algo que quiera decir aquí,
así que quiero establecer opciones de navegación específicas para la pantalla favorita y podemos usarla aquí cuando creamos el navegador
de pila de favoritos con la forma más larga. donde configuramos la pantalla y las opciones de navegación para esa
pantalla aquí o lo hacemos directamente en nuestro componente, eso es lo que hice
hasta ahora, eso
es lo que haré aquí también.
Allí podemos configurar FavoritosScreen. Opciones de navegación como esta, use el
objeto aquí, no necesitamos
la función porque no derivaré el nombre dinámicamente aquí y en las opciones de navegación aquí,
simplemente estableceré el título del encabezado en sus favoritos y, por supuesto, puede elegir cualquier texto que desee aquí y
si
ahora lo guardamos, ahora vemos nuestro título personalizado aquí, que es un poco mejor.
Ahora, como dije, todavía no tenemos las herramientas para almacenar las comidas como favoritas, eso es algo
que haremos en un tiempo.
Entonces, por ahora, solo quiero mostrar algunas
comidas falsas aquí, digamos las comidas con la ID M1 y M2, simplemente dos comidas falsas y para eso, podemos
ir a la pantalla favorita y en lugar de mostrar esta vista aquí, en el final
Quiero mostrar lo mismo que en la pantalla de
categoría de comidas, a la derecha, quiero representar una FlatList que luego muestra mis elementos de comida aquí.
La única diferencia es qué comidas
ofrezco, esa lógica no será la misma porque eso es diferente para mi pantalla favorita.
Sin embargo, esto será lo mismo y dado que reutilizaré esa lógica de creación de lista
y lo único que difiere es la información que proporciono, tendría sentido externalizar esta lista en un componente separado, para
que podamos reutilizar el componente en el categoría comidas en pantalla y en la pantalla de favoritos.
Entonces, en la carpeta de componentes, agregaré una MealList. js y allí, quiero tener un componente
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,
por supuesto, y luego aquí , podemos crear nuestro componente de
lista de comidas donde obtenemos accesorios y exportamos eso de forma predeterminada a partir de entonces, también necesitaremos algunos estilos para
que
ya podamos agregar la hoja de estilo crear aquí así y ahora quiero mover mi lógica de lista
de categoría pantalla de comida en este nuevo componente. Así que cortaré todo este código jsx que devuelvo
aquí en la pantalla de comida de categoría y lo moveré aquí y lo devolveré en el componente de la
lista de comidas.
Así que ahora aquí, devolveré esa vista
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
estilo de pantalla también se puede cortar de las comidas de categoría y, por lo tanto, aquí, ya no necesitamos una
hoja de estilo,
podemos deshacernos de la importación de la hoja
de estilo, también podemos deshacerse de todas las importaciones de React Native porque ya no tenemos ningún componente específico
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
de eliminar y un nombre más apropiado, por lo tanto, probablemente sea listas, por lo que cambiaré el nombre,
técnicamente no es necesario cambiar el nombre, pero tiene sentido porque ahora no es un componente
de la pantalla, solo representa una lista que luego es la única parte en nuestra pantalla,
pero esa es una historia diferente. Así que solo nombraré esta lista, tengo mi FlatList allí.
Ahora, por supuesto, muestra las comidas que quiero representar, que ya no funcionarán, en
cambio, simplemente espero obtener algunos datos de mis accesorios aquí, tal vez nombrarlos datos de la lista, puede elegir el nombre que desee aquí,
por supuesto, y renderizar artículo de comida, eso también falta. Para eso en la categoría de comidas, podemos
reducir este
elemento de comida constante aquí, cortarlo de la pantalla
de comidas de categoría y pasarlo a nuestra lista de comidas también.
Entonces, en el componente de la
lista de comidas, agregaré esta constante que contiene esta función de procesamiento de elementos de comida que tiene todo lo que
necesita para funcionar, excepto por una cosa, falta la importación del
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
de comidas y ese será el
accesorio de navegación porque, como mencioné, el accesorio de navegación solo está disponible en
componentes que se cargan con la ayuda de un navegador por React navigation y solo en ese componente,
no en componentes anidados.
Entonces, la categoría de comidas es el componente que estamos cargando con la ayuda del navegador y si
luego usamos la lista de comidas allí que haremos en
un segundo, la lista de comidas no tendrá acceso a la navegación de accesorios, solo el componente cargado directamente tiene acceso,
pero será un problema fácil de resolver.
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
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
la que estamos trabajando,
así que pasemos los datos de la lista y eso debería apuntar simplemente a la matriz que queremos renderizar, que
en este caso
muestra comidas y ahora, como mencioné, tendremos un problema con el accesorio de navegación,
bueno, podemos enviarlo, podemos usar la navegación, agregar este accesorio aquí para la lista de comidas y la navegación de accesorios
hacia adelante,
así de fácil podemos enviar esto a la lista de comidas.
Entonces, ahora en la lista de comidas, en ese componente, tendremos un accesorio de navegación nuevamente porque
lo estamos reenviando, estamos agregando nuestro propio accesorio de navegación y estamos apuntando a los datos
que obtenemos en el accesorio de
navegación proporcionado por React
navegación, así es como tenemos acceso a él nuevamente aquí y con eso, deberíamos tener una configuración que funcione, así
que esa debería ser nuestra categoría de pantalla de comidas. Vamos a guardarlo e ignoraremos la pantalla favorita
por el momento y solo veremos que nuestro navegador de pila todavía funciona y parece hacer eso,
si lo pruebo, definitivamente todavía funciona aquí como lo era antes. Ahora asegurémonos de usar esto también en la
pantalla favorita.
Entonces, aquí en la pantalla de favoritos, no necesitamos importar nada de React Native, solo necesitamos
importar el componente de la lista de comidas que acabamos de crear a partir de los componentes y luego la lista
de comidas y simplemente devolver la lista de comidas y ahora la diferencia a la categoría La pantalla
de comidas donde también devolvemos la lista de comidas es, por supuesto, los datos que queremos representar,
la
lógica para derivar esos datos, esa es la
diferencia y otra diferencia entre
los componentes es, por supuesto, nuestra configuración de opciones de navegación y el título del
encabezado que estamos configurando.
Podemos deshacernos de la hoja de estilo aquí, ya no la necesitamos aquí en la
pantalla favorita y
ahora los datos que quiero representar,
eso depende de mis comidas,
por lo que importaré comidas de, ahora desde los datos ficticios . js y como mencioné, aquí ya que no tenemos una
forma real de establecer favoritos, solo usaré algunos favoritos ficticios que se me ocurrieron.
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
vistazo a cada comida
pero solo vuelvo verdadero si la comida. id es igual a M1 o si es comida. id es igual a M2 y, por
supuesto, es solo una lógica ficticia para que tengamos algo aquí,
lo reemplazaremos más adelante una vez que realmente sepamos cómo administrar nuestro estado y cómo
administrar los favoritos establecidos actualmente.
Ahora a la lista de comidas, a nuestro componente aquí, podemos reenviar el
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í.
Así que ahora también deberíamos tener algunos
favoritos y los tenemos, tenemos dos
favoritos, sin embargo, si hago clic en él, quedamos indefinidos, no es un objeto en el que intentamos llamar a la navegación
de accesorios y sí, el problema, por supuesto, es que en la lista de comidas, como mencioné, estamos usando el
accesorio de navegación y eso solo está disponible en el componente que se carga directamente a través
de un navegador, por lo que en este caso esa es la pantalla favorita y en la categoría comidas, resolvemos
esto reenviando la navegación utilería, por supuesto, necesitamos hacer lo mismo aquí para nuestra pantalla favorita, por lo que
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
utilería de navegación con el método de navegación esté disponible en el componente de la lista de comidas también.
Ahora con eso, si vamos a favoritos, de hecho podemos ir a la pantalla de detalles.
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
en la pantalla
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
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
estoy en la página de detalles de tostadas hawaii aquí en la pila de favoritos.
Entonces, estas dos pilas funcionan por separado, totalmente independientes
y así es como debe ser, y así es
como podemos reutilizar algo de lógica y cómo podemos tener diferentes pilas combinadas en el mismo navegador de
pestañas y aunque todavía
falta algo de lógica , la lógica para agregar realmente favoritos, este es un
gran paso adelante y con suerte le muestra el poder de la navegación React y cómo configurar este patrón
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
ese es un
cajón lateral.