1 00:00:02,430 --> 00:00:05,640 Commençons donc à travailler sur cette application et pour cela, j'ai 2 00:00:05,760 --> 00:00:08,270 une toute nouvelle application ici, vous la 3 00:00:08,280 --> 00:00:12,390 trouverez ci-jointe au cas où vous voudriez construire sur cette même application de départ. 4 00:00:12,420 --> 00:00:19,020 Cette application simple nous donne ici, une application très moche où nous avons du texte qui est chevauché 5 00:00:19,020 --> 00:00:21,440 par la barre d'état, par l'encoche. 6 00:00:21,450 --> 00:00:26,800 Maintenant, nous pourrions résoudre ce problème avec la vue de la zone de sauvegarde comme vous l'avez appris plus tôt, 7 00:00:26,820 --> 00:00:33,210 mais nous n'en aurons pas besoin car nous ne conserverons pas ce contenu de toute façon et nous utiliserons une bibliothèque tierce qui nous 8 00:00:33,210 --> 00:00:36,530 permet de naviguer facilement entre les différents écrans et d'obtenir de belles 9 00:00:36,690 --> 00:00:38,310 animations en cours de route, afin 10 00:00:38,310 --> 00:00:44,610 que nous n'ayons pas à nous en occuper et cette bibliothèque tierce gérera également l'encoche sur l'appareil et nous donnera cette zone de 11 00:00:44,610 --> 00:00:45,880 sauvegarde prête à l'emploi. 12 00:00:45,900 --> 00:00:52,230 Maintenant, avant d'ajouter cette bibliothèque tierce, commençons à écrire du code car nous ne pouvons naviguer 13 00:00:52,230 --> 00:00:56,020 entre les écrans que si nous avons plusieurs écrans. 14 00:00:56,040 --> 00:01:01,950 Donc, pour cela, je vais créer un nouveau dossier d'écrans ici et je vais également déjà 15 00:01:01,950 --> 00:01:07,830 créer un dossier de composants, la différence sera que dans le dossier d'écrans, nous avons ces 16 00:01:07,860 --> 00:01:15,420 composants React que nous utilisons ensuite en plein écran, je suppose et dans le dossier des composants à la place, nous aurons 17 00:01:15,420 --> 00:01:16,430 les composants 18 00:01:16,440 --> 00:01:23,280 que nous utilisons sur nos écrans, donc par exemple lorsque nous avons cette grille de catégories de repas, de 19 00:01:23,280 --> 00:01:30,200 catégories d'aliments, alors notre élément de grille serait un composant, la grille entière, toutes les catégories d'aliments écran serait cependant 20 00:01:30,450 --> 00:01:37,530 un écran et je suppose que cela a du sens. Maintenant, comme esquissé, comme prévu, dans cette application, nous aurons besoin de quelques écrans et je créerai déjà 21 00:01:37,530 --> 00:01:43,860 tous les fichiers et nous les remplirons de vie tout au long de ce module. Nous aurons besoin de l'écran des catégories et 22 00:01:43,890 --> 00:01:49,440 je nommerai l'écran des catégories de fichiers pour que ce soit vraiment clair à 23 00:01:49,440 --> 00:01:50,200 l'intérieur. 24 00:01:50,250 --> 00:01:57,270 C'est l'écran où nous pouvons sélectionner une catégorie comme l'italien, l'allemand, l'américain, donc où nous pouvons sélectionner une catégorie 25 00:01:57,270 --> 00:02:04,170 d'aliments, nous allons donc ajouter du contenu qui reflète cela, nous ajouterons une telle grille sur cet écran, dans 26 00:02:04,230 --> 00:02:06,420 cet écran composant plus tard. 27 00:02:06,420 --> 00:02:14,100 Maintenant, une fois que nous avons sélectionné une catégorie, nous verrons une liste de repas qui correspond à cette catégorie et je nommerai 28 00:02:14,100 --> 00:02:20,190 cet écran que nous verrons ensuite, vers lequel nous naviguerons, écran de repas de catégorie, car c'est l'écran 29 00:02:20,190 --> 00:02:23,390 qui se charge les repas pour une catégorie choisie. 30 00:02:23,460 --> 00:02:28,240 C'est donc un autre écran dont nous avons besoin et un autre écran sur lequel nous pourrons naviguer. 31 00:02:28,320 --> 00:02:35,100 Maintenant, nous aurons également besoin d'un écran de favoris qui est l'écran qui contient toutes nos recettes préférées, nos plats 32 00:02:35,100 --> 00:02:42,300 préférés et nous aurons également besoin d'un MealDetailScreen, c'est l'écran que nous voyons si nous tapons sur un seul repas à 33 00:02:42,300 --> 00:02:48,390 l'intérieur d'une catégorie choisie ou sur l'écran préféré. Cela nous montre ensuite les ingrédients et 34 00:02:48,390 --> 00:02:51,120 les étapes détaillées de ce repas. 35 00:02:51,120 --> 00:02:58,020 Maintenant et enfin et surtout, comme prévu, nous aurons besoin d'un écran de filtres et cet écran de filtres est l'écran qui 36 00:02:58,020 --> 00:03:05,700 nous permet de définir des filtres, comme la nourriture végétalienne afin que nous ne voyions que les recettes végétaliennes ou végétariennes ou sans gluten ou 37 00:03:05,790 --> 00:03:08,110 sans lactose, ce seront les quatre 38 00:03:08,130 --> 00:03:14,950 catégories que j'aurai dans cette application, donc ce sont les écrans. Nous allons maintenant ajouter des composants selon nos besoins 39 00:03:15,040 --> 00:03:18,410 et non pas ajouter tous les fichiers à 40 00:03:18,430 --> 00:03:25,390 l'avance et avec cela, nous avons la configuration très basique dont nous avons besoin ici, bien que 41 00:03:25,720 --> 00:03:31,330 tous nos écrans soient totalement vides. Nous allons maintenant les remplir étape par étape, mais je veux 42 00:03:31,330 --> 00:03:34,160 au moins configurer un composant de base dans chacun de ces écrans. 43 00:03:34,390 --> 00:03:40,000 Je vais donc commencer dans l'écran des catégories et bien sûr, nous devons importer React à partir de React là-bas parce 44 00:03:40,000 --> 00:03:46,750 que nous allons construire un composant React et nous allons également importer quelque chose à partir de React Native car, évidemment, nous allons construire un 45 00:03:47,050 --> 00:03:52,600 composant React ici qui utilise certains composants React Native. Pour être précis, je vais commencer simplement ici 46 00:03:52,630 --> 00:03:58,110 et importer une vue et un texte de React Native puis créer mon composant, l'écran des catégories 47 00:03:58,120 --> 00:04:04,630 dans ce cas qui prend des accessoires ou qui pourrait recevoir des accessoires au moins parce que c'est un composant React 48 00:04:04,630 --> 00:04:11,530 normal après tout et où je l'exporterai comme composant par défaut. J'ajouterai également une feuille de style car il est probable que 49 00:04:11,530 --> 00:04:16,870 nous en aurons besoin et si nous ne le faisons pas, nous pouvons toujours la supprimer plus tard. 50 00:04:16,870 --> 00:04:19,150 Je vais donc configurer mes styles ici 51 00:04:19,150 --> 00:04:22,060 avec la création de feuilles de style, comme ceci. 52 00:04:22,330 --> 00:04:26,440 Donc, c'est un composant React très basique, ne rend rien cependant, 53 00:04:26,440 --> 00:04:32,730 donc à l'intérieur de la fonction du composant ici, nous devrons retourner quelque chose et que quelque chose 54 00:04:32,770 --> 00:04:39,920 est du code jsx où je veux rendre une vue et là-dedans, un texte et ici je dis l'écran des catégories. 55 00:04:40,240 --> 00:04:49,270 Maintenant, je vais également donner à cette vue un style où je dis des styles. écran, avec une disposition d'écran très basique ou un style d'écran ici 56 00:04:49,270 --> 00:04:56,260 où je mets flex à un, puis justifie le contenu au centre et aligne les éléments au centre et 57 00:04:56,260 --> 00:04:58,980 comme vous l'avez appris, cela fera une 58 00:04:59,080 --> 00:05:04,850 chose, il centrera le contenu sur l'écran, il finira donc par centrer ce texte sur l'écran. 59 00:05:04,960 --> 00:05:09,880 Ceci est le composant de base et je vais copier ce contenu dans tous les autres écrans et 60 00:05:09,910 --> 00:05:14,920 bien sûr, ce n'est pas le contenu final que nous aurons là-bas, juste du contenu factice afin que 61 00:05:14,920 --> 00:05:19,210 nous puissions commencer à naviguer entre certains de ces écrans et voir quelque chose . 62 00:05:19,210 --> 00:05:25,900 Donc ici, nous avons l'écran de repas de catégorie, c'est ce composant ici et c'est donc ce que 63 00:05:25,900 --> 00:05:37,880 nous devons exporter ici et ici, je dirai donc l'écran de repas de catégorie comme ça. Maintenant, je vais également l'ajouter à l'écran des favoris et le renommer en 64 00:05:37,880 --> 00:05:41,650 écran préféré et bien sûr, par conséquent exporter 65 00:05:41,690 --> 00:05:43,700 l'écran préféré ici et 66 00:05:43,700 --> 00:05:45,000 là, 67 00:05:45,110 --> 00:05:48,720 je peux dire l'écran des favoris, le copier 68 00:05:48,740 --> 00:05:53,060 dans l'écran des filtres et faire la même chose là-bas, 69 00:05:53,080 --> 00:05:55,920 c'est l'écran des filtres, je l'ai 70 00:05:55,940 --> 00:06:02,240 renommé et j'ai exporté cela et dis aussi l'écran des filtres ici dans notre 71 00:06:02,390 --> 00:06:06,110 texte et enfin et surtout, c'est le MealDetailScreen. 72 00:06:06,110 --> 00:06:09,000 Nous avons donc ici le 73 00:06:09,740 --> 00:06:15,140 MealDetailScreen, je vais aussi le nommer MealDetailScreen ici et exporter le MealDetailScreen. 74 00:06:15,140 --> 00:06:19,930 Donc, avec cela, nous avons tout configuré dans ces écrans, maintenant nous avons presque 75 00:06:20,060 --> 00:06:23,390 terminé toute la préparation, je veux juste ajouter des 76 00:06:23,450 --> 00:06:29,240 polices spéciales à cette application et par la suite, nous allons plonger directement dans l'ajout de navigation.