Comencemos cambiando ese icono de estrella
en función de si este es actualmente un favorito o no,
quiero tener esa estrella llena solo si es una favorita y una estrella vacía si no lo es.
Entonces, al final en la pantalla de detalles de la comida, necesitamos intercambiar ese ícono que mostramos aquí
en función del estado favorito de esta comida que cargamos aquí. Una vez más, el problema aquí es que podemos
averiguar si esa comida es una de las favoritas o no de una manera muy fácil en la función del componente,
pero no realmente en las opciones de navegación.
Entonces, nuevamente, necesitaremos parámetros para comunicarnos entre estos dos, pero en general, eso no es demasiado difícil.
Lo que quiero hacer aquí es obtener mis comidas favoritas con la ayuda del selector de uso en la función del componente de la pantalla de detalles de comidas
con la ayuda del estado y luego el estado. comidas comidas favoritas, así que quiero
obtener todas mis comidas favoritas y ahora simplemente quiero verificar si esa comida es parte
de las comidas favoritas y, por lo tanto, podemos refinar esto e incluso nombrar esta comida actual como favorita y en el selector no
solo regresar las comidas favoritas, pero agregue un poco más de lógica y simplemente agregue un cheque donde
llamamos a algunos, que también es un método incorporado que devuelve verdadero
si la condición que estamos a punto de especificar es verdadera para al menos un elemento en ese matriz y
allí, verifico para cada comida que está allí, si la ID de comida es igual a la ID de comida que recupero aquí y, por lo tanto, tengo que intercambiar líneas.
Así que aquí, obtengo el Id. De la comida donde estamos cargando en la pantalla de detalles
y luego verifico mis comidas favoritas, si esa ID de comida es parte de ellas, lo que significa que esta comida es parte de nuestros favoritos.
Entonces, con eso, tenemos esta comida actual es información favorita, ahora tenemos que pasarla a las opciones de navegación
y nuevamente, podemos hacer esto con efecto de uso, tal vez allí abajo. Al igual que antes, proporcione una función aquí en una
matriz de dependencias, en la función aquí estableceré parámetros de conjunto de navegación de accesorios para fusionar más datos en mis parámetros y ese
es quizás el parámetro favorito, el nombre depende de usted, lo que tiene la comida actual es el valor favorito,
por lo que ese valor que acabamos de derivar y ahora una dependencia de esa función, de esa
llamada de efecto de uso, quiero decir, por supuesto, la comida actual es favorita, cuando eso cambia, quiero
enviar la nueva información a los parámetros y por lo tanto al encabezado, de lo contrario este efecto no debería volver a ejecutarse.
Así que ahora de vuelta en las opciones de navegación, podemos recuperar esa información aquí, su
favorito se puede recuperar de navigationData. navegación con la ayuda de get param y allí llamo
a esto es fav, aquí está, así que ese es el nombre
con el que podemos recuperarlo.
Ahora tenemos la información favorita en el encabezado y ahora podemos usarla para representar un icono diferente
aquí.
Entonces, en lugar de representar siempre la estrella de iOS, tendré una expresión dinámica aquí y comprobaré si su favorito
es verdadero, si es así,
entonces quiero usar la estrella de iOS, que es esta estrella de campo,
si no
lo es, yo ' Presentaré el esquema de estrella de iOS y
será una estrella vacía.
Con eso, esperamos tener una configuración que funcione como se esperaba.
Si voy al espagueti, ahora
es una estrella vacía y si hago clic en
esta, es una estrella llena y es parte de los favoritos.
Si luego voy a la pantalla de detalles aquí, verá que también toma un poco hasta que
la estrella se complete aquí, tendremos que arreglar esto. Si ahora hago clic aquí y volvemos a las comidas, allí
también se actualizó y esa es la magia de Redux, actualiza una parte de la aplicación si algo relacionado cambia en otra
parte, así es exactamente como debería comportarse aquí. Entonces, eso generalmente funciona, lo
único que no fue demasiado hermoso es que esta estrella aquí inicialmente está vacía y solo se llena después
de cargarla, por lo que podemos arreglar
eso, pero aparte de eso, esto funciona como debería. Ahora, para arreglar esta estrella inicialmente vacía, nuevamente
podemos usar
una solución que expliqué anteriormente para los datos del encabezado inicial.
No queremos esperar a que termine el
primer renderizado, en su lugar, deberíamos pasar estos datos iniciales a este componente cuando naveguemos hacia él.
Por lo tanto, es hora de que la lista de comidas vuelva a tener esta acción de
navegación para reenviar también esta clave favorita, por lo que esta clave que intenté extraer aquí en la pantalla de detalles
de la comida allí abajo, get param es favorita. Quiero pasar el valor actual cuando cargamos este componente, cuando cargamos esta
pantalla aquí desde dentro de la lista de comidas, que es el componente que dispara esa navegación a
los detalles de
las comidas y, por supuesto, a los datos de elemento. el artículo es una sola comida, pero no contiene información sobre si es parte de nuestros
favoritos o no,
pero por supuesto podemos averiguar si ese es el caso o no. En la lista de comidas,
también podemos acceder a la tienda Redux, no solo desde los componentes de la pantalla.
Entonces, aquí también puedo usar el selector de uso de React Redux de esta manera y luego, en mi componente aquí, puedo obtener mis comidas favoritas con la
ayuda del selector de uso donde obtengo mi estado y luego el estado de retorno. las comidas salpican las comidas favoritas para obtener todas mis comidas favoritas
y ahora, cuando representamos un solo artículo
de comida, podemos usarlo para averiguar si ese artículo de comida es parte de
nuestros favoritos. Por cierto,
no puede usar el selector de uso allí,
ese no sería un uso válido porque debe usar React hooks solo en el nivel raíz de
la función de su componente, no en funciones anidadas o anidadas si
son bloques o algo así, por lo
tanto, no está permitido usar el selector de uso aquí, pero podemos usar nuestras comidas favoritas allí, por
lo tanto, aquí podemos averiguar si es un favorito simplemente al verificar las comidas favoritas y buscar la comida donde su ID coincide con el elemento Datos
.
articulo.
id, por lo que la identificación de la comida que estamos procesando actualmente. Por lo tanto, su favorito mantendrá el elemento que encontramos
allí, alternativamente, usaremos algunos aquí, que es un método de Javascript incorporado que devolverá verdadero si algún elemento en
las comidas favoritas cumple con esta condición.
Entonces, si su favorito es verdadero, sabemos que este elemento es un favorito y, por lo tanto, podemos usar su
favorito como valor para fav, que pasamos como parámetro inicial a la pantalla de detalles de
la comida y ahora esta estrella parpadeante que inicialmente está vacía debería estar ido.
Ahora, si marco esto como favorito aquí y lo dejo y vuelvo, se completa desde el
principio, también
en la pantalla de favoritos, por supuesto. Entonces es así, así es como podemos trabajar con
favoritos, ahora asegurémonos de mostrar texto falso
aquí en la pantalla de favoritos en caso de que no tengamos datos que mostrar de
otra manera y, a partir de
entonces, cuidemos nuestros filtros.