Maintenant, avec les onglets ajoutés, il manque du contenu dans l'écran favori.
Maintenant, nous n'avons pas encore vraiment de fonctionnalités pour ajouter des favoris, si nous cliquons sur cette icône en forme d'étoile, cela ne fait rien et,
soit dit
en passant, je suis conscient que nous manquons également de contenu
ici, nous ajouterons ceci plus tard.
Donc, cliquer sur l'icône en forme d'étoile ne fait rien pour le moment et nous
ne pourrons faire que
cela quelque chose plus tard, je veux quand même remplir cet écran préféré un peu plus au moins avec des
repas factices que nous chargeons
là-bas disons et au moins avec la fonctionnalité pour y aller également au MealDetailScreen parce qu'au final, l'idée
ici est que nous avons une liste de repas ici, tout comme
nous l'avons ici après avoir sélectionné une catégorie et sur laquelle nous pouvons appuyer un repas pour aller à
la page des détails,
tout comme nous pouvons le faire dans le navigateur de repas, donc dans le navigateur de pile de repas,
je devrais dire et donc à la fin, ce dont nous avons besoin pour les favoris, car notre onglet favoris n'est pas un seul écran mais une autre
pile,
une pile pour notre fonctionnalité préférée dans cette application, c'est ce dont
nous avons besoin ici, cela nous donnera alors également un en-tête qui nous manque actuellement.
Bien sûr, ce n'est pas trop
difficile à implémenter, nous pouvons simplement créer un autre navigateur de pile au-dessus de notre tabScreenConfig et cela configurera le navigateur
de pile pour notre pile de favoris.
Donc, l'objet que nous passons ici doit définir tous les écrans que nous voulons avoir dans cette
pile et ce serait l'écran des favoris lui-même avec la liste de nos plats
préférés et là je veux pointer sur l'écran des favoris et ensuite je veux avoir un détail du repas et
je vais pointer sur MealDetailScreen et nous utilisons déjà le MealDetailScreen ici dans notre navigateur de repas, dans notre autre navigateur
de pile, mais c'est
tout à fait
correct, vous pouvez utiliser un seul et même écran dans différents navigateurs de
pile, il n'y a rien de mal à cette.
Nous pouvons donc également utiliser MealDetailScreen ici dans le navigateur de pile de favoris et maintenant je veux juste m'assurer que
je copie également mes options ici, mes options de navigation par défaut, ce deuxième argument en
fait pour créer le navigateur de pile, pour le navigateur de repas dans mes favoris navigateur de
pile également.
Donc, ici comme deuxième argument pour créer un navigateur de pile, je copie dans cet
objet où je configure mes options de navigation par défaut de sorte que pour cette pile, j'ai les
mêmes valeurs par défaut, j'ai le même style d'en-tête et donc bien sûr, nous pouvons également coupez-le d'ici et
supprimez-le d'ici et stockez ce paramètre par défaut dans une constante ici, peut-être notre defaultStackNavOptions, c'est cet objet qui définit le style d'en-tête et nous pouvons ensuite
utiliser les defaultStackNavOptions ici dans notre pile de navigateur de repas et également ici dans notre navigateur
de pile de favoris et je vais également le stocker dans la constante FavNavigator, bien sûr, vous pouvez nommer
cette constante comme vous le souhaitez.
Maintenant, c'est ce FavNavigator, donc
ce composant de navigateur de pile créé à la fin que je veux utiliser dans mon ongletScreenConfig, là pour les
repas, nous utilisions déjà le navigateur de pile, pour les favoris, j'utilisais l'écran préféré et cela
doit maintenant changer,
maintenant devrait être le FavNavigator, de sorte qu'ici, nous utilisons également une pile au lieu d'un seul écran.
Et avec cela déjà, si nous allons dans les favoris, nous avons notre titre ici, au moins nous avons un en-tête
qui prouve déjà que nous utilisons un navigateur de pile ici.
Maintenant, bien sûr, un écran n'est pas vraiment utile, pas quelque chose que je veux dire ici, donc
je veux définir des options de navigation spécifiques pour l'écran préféré et nous pouvons soit l'utiliser ici lorsque nous créons le
navigateur de pile de favoris avec le formulaire plus long où nous configurons l'écran et les options de navigation pour cet
écran ici ou nous le faisons directement dans notre composant, c'est ce que j'ai
fait jusqu'à présent, c'est
ce que je ferai ici également.
Là, nous pouvons configurer FavoritesScreen. navigationOptions comme celle-ci, utilisez l'objet ici, nous n'avons
pas besoin de la fonction
parce que je ne dériverai pas le nom dynamiquement ici et dans les options de navigation ici, je
vais simplement définir le titre de l'en-tête dans vos favoris et bien sûr, vous pouvez choisir n'importe quel texte que vous voulez ici
et
si nous l'enregistrons maintenant, nous voyons maintenant notre titre personnalisé ici qui est un peu mieux.
Maintenant, comme je l'ai dit, nous n'avons pas encore vraiment les outils pour stocker les repas en tant que favoris, c'est quelque
chose que nous ferons dans un certain temps.
Donc pour l'instant, je veux juste afficher
quelques repas factices ici, disons les repas avec l'ID M1 et M2, simplement deux repas factices et pour cela,
nous pouvons aller à l'écran préféré et au lieu d'afficher cette vue ici, dans le
fin Je veux afficher la même chose que dans
l'écran de la catégorie repas, à droite, je veux rendre une FlatList qui rend ensuite mes plats ici.
La seule différence est quels repas
je rends, cette logique ne sera pas la même car c'est différent pour mon écran préféré.
Ce sera cependant la même chose et puisque je vais réutiliser cette logique de création de
liste et la seule chose qui diffère est les données que je rend, il serait logique d'externaliser cette liste dans un
composant séparé, afin que nous puissions réutiliser le composant dans le écran repas catégorie et dans l'écran favoris.
Donc, dans le dossier des composants, je vais ajouter une liste de repas. fichier js et là-dedans, je veux avoir un
composant React, alors importez React de React et nous devrons également importer FlatList de react-native et nous devrons également importer la feuille de style de react-native bien
sûr, puis ici , nous pouvons créer notre composant de liste de repas
où nous obtenons des accessoires et nous l'exportons par défaut par la suite, nous aurons également besoin de certains styles afin que nous puissions
déjà
ajouter la feuille de style à créer ici comme ceci et maintenant je veux passer sur ma logique de liste
de la catégorie écran de repas dans ce nouveau composant. Je vais donc couper tout ce code jsx
que je renvoie ici dans l'écran de la catégorie repas et le déplacer ici et le retourner dans le composant
liste des repas.
Alors maintenant, ici, je reviendrai sur ce point
de vue et nous devons donc également importer la vue ici bien sûr. Cela signifie également que nous devons apporter le look, donc ici ce style d'écran
peut également être coupé de la catégorie repas et donc ici, nous n'avons plus besoin d'une feuille de style, nous
pouvons également nous
débarrasser de l'importation de la feuille de style,
nous pouvons réellement se débarrasser de toutes les importations React Native parce que nous n'avons plus de composant spécifique
React Native ici et le déplacer à la place dans la liste des repas. Donc là, dans la feuille de style, je peux ajouter cet écran que
je viens de supprimer et un nom plus approprié est donc probablement des listes, donc je vais le renommer, techniquement
vous n'avez pas à le renommer mais cela a du sens parce que ce n'est plus un composant
d'écran plus, c'est juste le rendu d'une liste qui se trouve être la seule partie sur notre
écran mais c'est une autre histoire. Je vais donc simplement nommer cette liste, avoir ma FlatList là-dedans.
Maintenant, bien sûr, les repas affichés que je veux rendre, cela ne fonctionnera plus, au lieu de
cela, je m'attends simplement à obtenir des données de mes accessoires ici, peut-être les nommer, lister les données, vous pouvez choisir le nom que vous voulez ici
bien sûr et le rendre élément de repas, qui manque également. Pour cela, dans la catégorie repas, nous pouvons
couper ce
rendu de repas constant ici, le couper de l'écran
de la catégorie repas et le déplacer également dans notre liste de repas.
Donc là dans le composant
liste de repas, j'ajouterai cette constante qui contient cette fonction de rendu de repas qui a tout ce
dont elle a besoin, sauf pour une chose, l'importation
de repas est manquante, nous devons donc importer des repas de. / MealItem, donc à partir du composant élément de repas. Une autre chose manquera également ici dans le composant de liste
de repas et ce sera l'accessoire
de navigation car, comme je l'ai mentionné, l'accessoire de navigation n'est disponible que dans
les composants qui sont chargés à l'aide d'un navigateur par React navigation et uniquement dans ce composant, pas
dans les composants imbriqués.
Donc, la chose est que la catégorie repas est le composant que nous chargeons avec l'aide du navigateur et si
nous utilisons ensuite la liste des repas là-bas, ce que nous
ferons dans une seconde, la liste des repas n'aura pas accès à la navigation des accessoires, seulement le composant directement chargé a accès
mais ce sera un problème facile à résoudre.
Tout d'abord cependant, importons la liste des repas ici à partir du composant liste des repas et retournons la liste des repas ici dans la catégorie
composant repas et maintenant la liste des repas a bien sûr besoin de cette liste de données avec laquelle nous travaillons, alors passons les
données de la liste
et cela devrait simplement pointer vers le tableau que nous voulons rendre qui, dans ce cas, est affiché les repas et
maintenant, comme je l'ai
mentionné, nous aurons un problème avec l'accessoire de navigation, eh bien nous pouvons simplement
le transmettre, nous pouvons utiliser la navigation, ajouter un tel accessoire ici à la liste des repas et à la navigation des
accessoires, c'est
ainsi que nous pouvons facilement transmettre cela à la liste des repas.
Alors maintenant, dans la liste des repas, dans ce composant, nous aurons à nouveau un accessoire de navigation
parce que nous le transmettons, nous ajoutons notre propre accessoire de navigation et nous pointons les données
que nous obtenons sur l'accessoire de
navigation fourni par React
la navigation, c'est ainsi que nous y avons à nouveau accès ici et avec cela, nous devrions avoir une configuration qui
fonctionne, ce devrait donc être notre écran de catégorie de repas. Enregistrons-le et ignorons l'écran préféré pour le
moment et voyons juste que notre navigateur de pile ici fonctionne toujours et il semble que
si je teste cela, cela fonctionne toujours ici comme avant. Maintenant, assurons-nous de l'utiliser également dans
l'écran préféré.
Donc ici sur l'écran préféré, nous n'avons pas besoin d'importer quoi que ce soit à partir de React
Native, à la place nous avons juste besoin d'importer le composant de la liste de repas que nous venons de créer à partir
des composants, puis la liste des repas et simplement retourner la liste des repas et maintenant la différence dans
la catégorie L'écran de repas où nous renvoyons également la liste des repas est bien sûr les données
que nous
voulons rendre, la logique pour dériver ces données,
c'est la différence et une
autre différence entre les composants est bien sûr notre configuration d'options de navigation et le titre
d'en-tête que nous définissons.
Nous pouvons nous débarrasser de la feuille de style ici, nous n'en avons plus besoin ici
dans l'écran préféré
et maintenant les données que je veux
rendre, cela dépend de mes repas, donc
je vais importer des repas depuis, maintenant à partir des données factices . fichier js et comme je l'ai mentionné, ici puisque nous n'avons pas
de véritable moyen de définir des favoris, je vais simplement utiliser quelques favoris factices que je propose.
Donc ici, mes repas préférés, qui pourraient être ma gamme de repas et là, je veux filtrer pour deux repas spécifiques, donc je vais jeter un
œil à chaque repas,
mais je ne reviens vrai que si le repas. id est égal à M1 ou si repas. id est égal à M2 et c'est bien
sûr juste une logique factice pour que nous ayons quelque chose ici,
nous le remplacerons plus tard une fois que nous saurons vraiment comment gérer notre état et comment
gérer les favoris actuellement définis.
Maintenant, pour la liste des repas, à notre composant ici, nous pouvons à
nouveau transmettre les données de la liste dont nous avons besoin, afin que nous puissions transmettre les données de la liste et les définir comme des repas préférés, comme ça.
Alors maintenant, nous devrions également avoir des
favoris et nous en avons deux,
mais si je clique dessus, nous ne sommes pas définis n'est pas un objet où nous essayons d'appeler la navigation par accessoires
et oui, le problème est bien sûr que dans la liste des repas, comme je l'ai mentionné, nous utilisons
l'accessoire de navigation et qui n'est disponible que dans le composant qui est directement chargé via
un navigateur, donc dans ce cas, c'est l'écran préféré et dans la catégorie repas, nous résolvons cela en transférant
la navigation accessoire, bien sûr, nous devons faire la même chose ici pour notre écran préféré, nous devons donc
fournir cet accessoire de navigation ici sur la liste des repas et la navigation des accessoires avant afin que cet
accessoire de navigation avec la méthode de navigation soit disponible dans le composant liste des repas ainsi que.
Maintenant, avec cela, si nous allons dans les favoris, nous pouvons en effet aller à l'écran de détail.
Donc ça marche, c'est assez décent, plutôt sympa. Comme vous le voyez, ces deux navigateurs de pile fonctionnent également indépendamment l'un de l'autre,
nous pouvons être
sur l'écran de détail dans les deux piles séparément, ici je suis sur l'écran de détail du saumon dans l'onglet repas et
je peux aller au toast hawaii écran de détail dans l'onglet Favoris. Nous pouvons revenir ici dans l'onglet repas et je suis
toujours sur la page de détail de toast hawaii ici dans la pile des favoris.
Donc, ces deux piles fonctionnent séparément l'une de l'autre,
totalement indépendantes et c'est ainsi que cela devrait être
et c'est ainsi que nous pouvons réutiliser une certaine logique et comment nous pouvons fusionner différentes piles en un seul
et même navigateur d'onglets et
même s'il manque encore une certaine logique , la logique pour vraiment ajouter des favoris,
c'est un énorme pas en avant et, espérons-le, vous montre la puissance de la navigation React et comment configurer ce modèle
de navigation commun où vous avez des onglets, puis différentes piles imbriquées. Il manque un modèle de navigation que je veux vous
montrer et c'est un
tiroir latéral.