1 00:00:02,400 --> 00:00:06,680 Maintenant, avec les onglets ajoutés, il manque du contenu dans l'écran favori. 2 00:00:06,740 --> 00:00:12,960 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, 3 00:00:12,960 --> 00:00:13,640 soit dit 4 00:00:13,650 --> 00:00:16,370 en passant, je suis conscient que nous manquons également de contenu 5 00:00:16,380 --> 00:00:17,680 ici, nous ajouterons ceci plus tard. 6 00:00:17,880 --> 00:00:22,140 Donc, cliquer sur l'icône en forme d'étoile ne fait rien pour le moment et nous 7 00:00:22,140 --> 00:00:23,370 ne pourrons faire que 8 00:00:23,490 --> 00:00:29,040 cela quelque chose plus tard, je veux quand même remplir cet écran préféré un peu plus au moins avec des 9 00:00:29,040 --> 00:00:30,340 repas factices que nous chargeons 10 00:00:30,480 --> 00:00:35,640 là-bas disons et au moins avec la fonctionnalité pour y aller également au MealDetailScreen parce qu'au final, l'idée 11 00:00:35,640 --> 00:00:39,080 ici est que nous avons une liste de repas ici, tout comme 12 00:00:39,090 --> 00:00:44,460 nous l'avons ici après avoir sélectionné une catégorie et sur laquelle nous pouvons appuyer un repas pour aller à 13 00:00:44,460 --> 00:00:45,620 la page des détails, 14 00:00:45,660 --> 00:00:50,940 tout comme nous pouvons le faire dans le navigateur de repas, donc dans le navigateur de pile de repas, 15 00:00:50,940 --> 00:00:58,620 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 16 00:00:58,620 --> 00:00:59,330 pile, 17 00:00:59,340 --> 00:01:02,750 une pile pour notre fonctionnalité préférée dans cette application, c'est ce dont 18 00:01:02,760 --> 00:01:06,960 nous avons besoin ici, cela nous donnera alors également un en-tête qui nous manque actuellement. 19 00:01:07,470 --> 00:01:10,020 Bien sûr, ce n'est pas trop 20 00:01:10,110 --> 00:01:18,500 difficile à implémenter, nous pouvons simplement créer un autre navigateur de pile au-dessus de notre tabScreenConfig et cela configurera le navigateur 21 00:01:18,500 --> 00:01:21,390 de pile pour notre pile de favoris. 22 00:01:21,530 --> 00:01:26,630 Donc, l'objet que nous passons ici doit définir tous les écrans que nous voulons avoir dans cette 23 00:01:26,630 --> 00:01:30,830 pile et ce serait l'écran des favoris lui-même avec la liste de nos plats 24 00:01:30,830 --> 00:01:36,470 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 25 00:01:36,710 --> 00:01:42,710 je vais pointer sur MealDetailScreen et nous utilisons déjà le MealDetailScreen ici dans notre navigateur de repas, dans notre autre navigateur 26 00:01:42,710 --> 00:01:44,000 de pile, mais c'est 27 00:01:44,030 --> 00:01:45,230 tout à fait 28 00:01:45,230 --> 00:01:49,030 correct, vous pouvez utiliser un seul et même écran dans différents navigateurs de 29 00:01:49,040 --> 00:01:51,540 pile, il n'y a rien de mal à cette. 30 00:01:51,710 --> 00:01:58,340 Nous pouvons donc également utiliser MealDetailScreen ici dans le navigateur de pile de favoris et maintenant je veux juste m'assurer que 31 00:01:58,340 --> 00:02:03,550 je copie également mes options ici, mes options de navigation par défaut, ce deuxième argument en 32 00:02:03,560 --> 00:02:09,170 fait pour créer le navigateur de pile, pour le navigateur de repas dans mes favoris navigateur de 33 00:02:09,170 --> 00:02:10,070 pile également. 34 00:02:10,070 --> 00:02:15,680 Donc, ici comme deuxième argument pour créer un navigateur de pile, je copie dans cet 35 00:02:15,680 --> 00:02:22,430 objet où je configure mes options de navigation par défaut de sorte que pour cette pile, j'ai les 36 00:02:22,430 --> 00:02:29,330 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 37 00:02:29,330 --> 00:02:39,100 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 38 00:02:39,330 --> 00:02:45,670 utiliser les defaultStackNavOptions ici dans notre pile de navigateur de repas et également ici dans notre navigateur 39 00:02:45,840 --> 00:02:52,800 de pile de favoris et je vais également le stocker dans la constante FavNavigator, bien sûr, vous pouvez nommer 40 00:02:52,800 --> 00:02:55,330 cette constante comme vous le souhaitez. 41 00:02:55,410 --> 00:02:57,230 Maintenant, c'est ce FavNavigator, donc 42 00:02:57,270 --> 00:03:03,890 ce composant de navigateur de pile créé à la fin que je veux utiliser dans mon ongletScreenConfig, là pour les 43 00:03:03,920 --> 00:03:09,420 repas, nous utilisions déjà le navigateur de pile, pour les favoris, j'utilisais l'écran préféré et cela 44 00:03:09,420 --> 00:03:10,720 doit maintenant changer, 45 00:03:10,720 --> 00:03:16,620 maintenant devrait être le FavNavigator, de sorte qu'ici, nous utilisons également une pile au lieu d'un seul écran. 46 00:03:16,680 --> 00:03:23,220 Et avec cela déjà, si nous allons dans les favoris, nous avons notre titre ici, au moins nous avons un en-tête 47 00:03:23,220 --> 00:03:27,000 qui prouve déjà que nous utilisons un navigateur de pile ici. 48 00:03:27,080 --> 00:03:31,870 Maintenant, bien sûr, un écran n'est pas vraiment utile, pas quelque chose que je veux dire ici, donc 49 00:03:31,920 --> 00:03:37,500 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 50 00:03:37,560 --> 00:03:43,290 navigateur de pile de favoris avec le formulaire plus long où nous configurons l'écran et les options de navigation pour cet 51 00:03:43,290 --> 00:03:47,340 écran ici ou nous le faisons directement dans notre composant, c'est ce que j'ai 52 00:03:47,370 --> 00:03:48,570 fait jusqu'à présent, c'est 53 00:03:48,600 --> 00:03:50,330 ce que je ferai ici également. 54 00:03:50,340 --> 00:03:55,560 Là, nous pouvons configurer FavoritesScreen. navigationOptions comme celle-ci, utilisez l'objet ici, nous n'avons 55 00:03:55,740 --> 00:03:57,610 pas besoin de la fonction 56 00:03:57,630 --> 00:04:03,900 parce que je ne dériverai pas le nom dynamiquement ici et dans les options de navigation ici, je 57 00:04:03,900 --> 00:04:11,700 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 58 00:04:11,700 --> 00:04:12,210 et 59 00:04:12,330 --> 00:04:17,880 si nous l'enregistrons maintenant, nous voyons maintenant notre titre personnalisé ici qui est un peu mieux. 60 00:04:17,880 --> 00:04:24,090 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 61 00:04:24,090 --> 00:04:26,410 chose que nous ferons dans un certain temps. 62 00:04:26,430 --> 00:04:29,160 Donc pour l'instant, je veux juste afficher 63 00:04:29,160 --> 00:04:36,000 quelques repas factices ici, disons les repas avec l'ID M1 et M2, simplement deux repas factices et pour cela, 64 00:04:36,000 --> 00:04:41,670 nous pouvons aller à l'écran préféré et au lieu d'afficher cette vue ici, dans le 65 00:04:41,670 --> 00:04:45,000 fin Je veux afficher la même chose que dans 66 00:04:45,000 --> 00:04:51,480 l'écran de la catégorie repas, à droite, je veux rendre une FlatList qui rend ensuite mes plats ici. 67 00:04:51,480 --> 00:04:53,620 La seule différence est quels repas 68 00:04:53,640 --> 00:04:58,300 je rends, cette logique ne sera pas la même car c'est différent pour mon écran préféré. 69 00:04:58,320 --> 00:05:03,480 Ce sera cependant la même chose et puisque je vais réutiliser cette logique de création de 70 00:05:03,480 --> 00:05:09,570 liste et la seule chose qui diffère est les données que je rend, il serait logique d'externaliser cette liste dans un 71 00:05:09,750 --> 00:05:15,140 composant séparé, afin que nous puissions réutiliser le composant dans le écran repas catégorie et dans l'écran favoris. 72 00:05:15,180 --> 00:05:20,970 Donc, dans le dossier des composants, je vais ajouter une liste de repas. fichier js et là-dedans, je veux avoir un 73 00:05:21,000 --> 00:05:30,210 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 74 00:05:30,210 --> 00:05:34,470 sûr, puis ici , nous pouvons créer notre composant de liste de repas 75 00:05:34,470 --> 00:05:42,500 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 76 00:05:42,500 --> 00:05:43,180 déjà 77 00:05:43,190 --> 00:05:49,940 ajouter la feuille de style à créer ici comme ceci et maintenant je veux passer sur ma logique de liste 78 00:05:49,940 --> 00:05:56,690 de la catégorie écran de repas dans ce nouveau composant. Je vais donc couper tout ce code jsx 79 00:05:56,930 --> 00:06:04,640 que je renvoie ici dans l'écran de la catégorie repas et le déplacer ici et le retourner dans le composant 80 00:06:04,910 --> 00:06:06,380 liste des repas. 81 00:06:06,380 --> 00:06:08,720 Alors maintenant, ici, je reviendrai sur ce point 82 00:06:08,720 --> 00:06:16,000 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 83 00:06:16,000 --> 00:06:21,340 peut également être coupé de la catégorie repas et donc ici, nous n'avons plus besoin d'une feuille de style, nous 84 00:06:21,340 --> 00:06:22,370 pouvons également nous 85 00:06:22,480 --> 00:06:24,700 débarrasser de l'importation de la feuille de style, 86 00:06:24,700 --> 00:06:29,650 nous pouvons réellement se débarrasser de toutes les importations React Native parce que nous n'avons plus de composant spécifique 87 00:06:29,680 --> 00:06:37,000 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 88 00:06:37,000 --> 00:06:42,540 je viens de supprimer et un nom plus approprié est donc probablement des listes, donc je vais le renommer, techniquement 89 00:06:42,610 --> 00:06:47,590 vous n'avez pas à le renommer mais cela a du sens parce que ce n'est plus un composant 90 00:06:47,590 --> 00:06:52,570 d'écran plus, c'est juste le rendu d'une liste qui se trouve être la seule partie sur notre 91 00:06:52,570 --> 00:06:56,590 écran mais c'est une autre histoire. Je vais donc simplement nommer cette liste, avoir ma FlatList là-dedans. 92 00:06:57,960 --> 00:07:02,240 Maintenant, bien sûr, les repas affichés que je veux rendre, cela ne fonctionnera plus, au lieu de 93 00:07:02,240 --> 00:07:09,170 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 94 00:07:09,170 --> 00:07:15,380 bien sûr et le rendre élément de repas, qui manque également. Pour cela, dans la catégorie repas, nous pouvons 95 00:07:16,190 --> 00:07:17,030 couper ce 96 00:07:17,040 --> 00:07:20,570 rendu de repas constant ici, le couper de l'écran 97 00:07:20,570 --> 00:07:25,250 de la catégorie repas et le déplacer également dans notre liste de repas. 98 00:07:25,250 --> 00:07:27,240 Donc là dans le composant 99 00:07:27,290 --> 00:07:33,890 liste de repas, j'ajouterai cette constante qui contient cette fonction de rendu de repas qui a tout ce 100 00:07:34,160 --> 00:07:37,650 dont elle a besoin, sauf pour une chose, l'importation 101 00:07:37,760 --> 00:07:49,160 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 102 00:07:49,160 --> 00:07:51,470 de repas et ce sera l'accessoire 103 00:07:51,470 --> 00:07:56,300 de navigation car, comme je l'ai mentionné, l'accessoire de navigation n'est disponible que dans 104 00:07:56,300 --> 00:08:02,390 les composants qui sont chargés à l'aide d'un navigateur par React navigation et uniquement dans ce composant, pas 105 00:08:02,420 --> 00:08:04,100 dans les composants imbriqués. 106 00:08:04,100 --> 00:08:09,620 Donc, la chose est que la catégorie repas est le composant que nous chargeons avec l'aide du navigateur et si 107 00:08:09,620 --> 00:08:12,630 nous utilisons ensuite la liste des repas là-bas, ce que nous 108 00:08:12,690 --> 00:08:18,920 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 109 00:08:19,400 --> 00:08:21,790 mais ce sera un problème facile à résoudre. 110 00:08:21,890 --> 00:08:30,530 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 111 00:08:30,650 --> 00:08:38,690 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 112 00:08:38,690 --> 00:08:39,920 données de la liste 113 00:08:39,920 --> 00:08:46,900 et cela devrait simplement pointer vers le tableau que nous voulons rendre qui, dans ce cas, est affiché les repas et 114 00:08:46,900 --> 00:08:48,130 maintenant, comme je l'ai 115 00:08:48,140 --> 00:08:53,110 mentionné, nous aurons un problème avec l'accessoire de navigation, eh bien nous pouvons simplement 116 00:08:53,260 --> 00:09:00,760 le transmettre, nous pouvons utiliser la navigation, ajouter un tel accessoire ici à la liste des repas et à la navigation des 117 00:09:00,790 --> 00:09:01,960 accessoires, c'est 118 00:09:01,960 --> 00:09:06,170 ainsi que nous pouvons facilement transmettre cela à la liste des repas. 119 00:09:06,200 --> 00:09:11,660 Alors maintenant, dans la liste des repas, dans ce composant, nous aurons à nouveau un accessoire de navigation 120 00:09:11,660 --> 00:09:16,940 parce que nous le transmettons, nous ajoutons notre propre accessoire de navigation et nous pointons les données 121 00:09:16,940 --> 00:09:18,810 que nous obtenons sur l'accessoire de 122 00:09:18,890 --> 00:09:20,480 navigation fourni par React 123 00:09:20,540 --> 00:09:26,850 la navigation, c'est ainsi que nous y avons à nouveau accès ici et avec cela, nous devrions avoir une configuration qui 124 00:09:27,240 --> 00:09:33,570 fonctionne, ce devrait donc être notre écran de catégorie de repas. Enregistrons-le et ignorons l'écran préféré pour le 125 00:09:33,570 --> 00:09:40,110 moment et voyons juste que notre navigateur de pile ici fonctionne toujours et il semble que 126 00:09:40,160 --> 00:09:48,820 si je teste cela, cela fonctionne toujours ici comme avant. Maintenant, assurons-nous de l'utiliser également dans 127 00:09:48,820 --> 00:09:50,620 l'écran préféré. 128 00:09:50,620 --> 00:09:55,320 Donc ici sur l'écran préféré, nous n'avons pas besoin d'importer quoi que ce soit à partir de React 129 00:09:55,330 --> 00:10:01,270 Native, à la place nous avons juste besoin d'importer le composant de la liste de repas que nous venons de créer à partir 130 00:10:01,600 --> 00:10:06,670 des composants, puis la liste des repas et simplement retourner la liste des repas et maintenant la différence dans 131 00:10:06,730 --> 00:10:11,500 la catégorie L'écran de repas où nous renvoyons également la liste des repas est bien sûr les données 132 00:10:11,510 --> 00:10:12,150 que nous 133 00:10:12,190 --> 00:10:14,410 voulons rendre, la logique pour dériver ces données, 134 00:10:14,410 --> 00:10:15,880 c'est la différence et une 135 00:10:15,880 --> 00:10:20,250 autre différence entre les composants est bien sûr notre configuration d'options de navigation et le titre 136 00:10:20,260 --> 00:10:21,450 d'en-tête que nous définissons. 137 00:10:22,030 --> 00:10:26,680 Nous pouvons nous débarrasser de la feuille de style ici, nous n'en avons plus besoin ici 138 00:10:26,680 --> 00:10:27,820 dans l'écran préféré 139 00:10:27,970 --> 00:10:30,010 et maintenant les données que je veux 140 00:10:30,100 --> 00:10:31,960 rendre, cela dépend de mes repas, donc 141 00:10:34,440 --> 00:10:42,060 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 142 00:10:42,080 --> 00:10:47,120 de véritable moyen de définir des favoris, je vais simplement utiliser quelques favoris factices que je propose. 143 00:10:47,160 --> 00:10:55,710 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 144 00:10:55,860 --> 00:10:57,500 œil à chaque repas, 145 00:10:57,540 --> 00:11:05,510 mais je ne reviens vrai que si le repas. id est égal à M1 ou si repas. id est égal à M2 et c'est bien 146 00:11:05,520 --> 00:11:09,480 sûr juste une logique factice pour que nous ayons quelque chose ici, 147 00:11:09,600 --> 00:11:15,330 nous le remplacerons plus tard une fois que nous saurons vraiment comment gérer notre état et comment 148 00:11:15,330 --> 00:11:17,580 gérer les favoris actuellement définis. 149 00:11:17,610 --> 00:11:23,730 Maintenant, pour la liste des repas, à notre composant ici, nous pouvons à 150 00:11:23,820 --> 00:11:36,840 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. 151 00:11:36,850 --> 00:11:38,980 Alors maintenant, nous devrions également avoir des 152 00:11:39,010 --> 00:11:40,990 favoris et nous en avons deux, 153 00:11:40,990 --> 00:11:47,440 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 154 00:11:48,670 --> 00:11:54,520 et oui, le problème est bien sûr que dans la liste des repas, comme je l'ai mentionné, nous utilisons 155 00:11:54,550 --> 00:11:59,560 l'accessoire de navigation et qui n'est disponible que dans le composant qui est directement chargé via 156 00:11:59,590 --> 00:12:05,440 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 157 00:12:05,440 --> 00:12:11,080 la navigation accessoire, bien sûr, nous devons faire la même chose ici pour notre écran préféré, nous devons donc 158 00:12:11,080 --> 00:12:17,170 fournir cet accessoire de navigation ici sur la liste des repas et la navigation des accessoires avant afin que cet 159 00:12:17,170 --> 00:12:22,800 accessoire de navigation avec la méthode de navigation soit disponible dans le composant liste des repas ainsi que. 160 00:12:22,870 --> 00:12:29,940 Maintenant, avec cela, si nous allons dans les favoris, nous pouvons en effet aller à l'écran de détail. 161 00:12:30,130 --> 00:12:37,690 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, 162 00:12:37,720 --> 00:12:38,700 nous pouvons être 163 00:12:38,700 --> 00:12:44,200 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 164 00:12:44,470 --> 00:12:50,410 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 165 00:12:50,530 --> 00:12:54,840 toujours sur la page de détail de toast hawaii ici dans la pile des favoris. 166 00:12:54,940 --> 00:12:57,670 Donc, ces deux piles fonctionnent séparément l'une de l'autre, 167 00:12:57,700 --> 00:13:00,350 totalement indépendantes et c'est ainsi que cela devrait être 168 00:13:00,610 --> 00:13:06,130 et c'est ainsi que nous pouvons réutiliser une certaine logique et comment nous pouvons fusionner différentes piles en un seul 169 00:13:06,130 --> 00:13:07,760 et même navigateur d'onglets et 170 00:13:07,810 --> 00:13:11,900 même s'il manque encore une certaine logique , la logique pour vraiment ajouter des favoris, 171 00:13:11,950 --> 00:13:17,620 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 172 00:13:17,620 --> 00:13:24,490 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 173 00:13:24,490 --> 00:13:25,920 montrer et c'est un 174 00:13:26,080 --> 00:13:27,210 tiroir latéral.