Commençons donc à travailler sur cette application et pour cela, j'ai
une toute nouvelle application ici, vous la
trouverez ci-jointe au cas où vous voudriez construire sur cette même application de départ.
Cette application simple nous donne ici, une application très moche où nous avons du texte qui est chevauché
par la barre d'état, par l'encoche.
Maintenant, nous pourrions résoudre ce problème avec la vue de la zone de sauvegarde comme vous l'avez appris plus tôt,
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
permet de naviguer facilement entre les différents écrans et d'obtenir de belles
animations en cours de route, afin
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
sauvegarde prête à l'emploi.
Maintenant, avant d'ajouter cette bibliothèque tierce, commençons à écrire du code car nous ne pouvons naviguer
entre les écrans que si nous avons plusieurs écrans.
Donc, pour cela, je vais créer un nouveau dossier d'écrans ici et je vais également déjà
créer un dossier de composants, la différence sera que dans le dossier d'écrans, nous avons ces
composants React que nous utilisons ensuite en plein écran, je suppose et dans le dossier des composants à la place, nous aurons
les composants
que nous utilisons sur nos écrans, donc par exemple lorsque nous avons cette grille de catégories de repas, de
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
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à
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
je nommerai l'écran des catégories de fichiers pour que ce soit vraiment clair à
l'intérieur.
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
d'aliments, nous allons donc ajouter du contenu qui reflète cela, nous ajouterons une telle grille sur cet écran, dans
cet écran composant plus tard.
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
cet écran que nous verrons ensuite, vers lequel nous naviguerons, écran de repas de catégorie, car c'est l'écran
qui se charge les repas pour une catégorie choisie.
C'est donc un autre écran dont nous avons besoin et un autre écran sur lequel nous pourrons naviguer.
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
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 à
l'intérieur d'une catégorie choisie ou sur l'écran préféré. Cela nous montre ensuite les ingrédients et
les étapes détaillées de ce repas.
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
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
sans lactose, ce seront les quatre
catégories que j'aurai dans cette application, donc ce sont les écrans. Nous allons maintenant ajouter des composants selon nos besoins
et non pas ajouter tous les fichiers à
l'avance et avec cela, nous avons la configuration très basique dont nous avons besoin ici, bien que
tous nos écrans soient totalement vides. Nous allons maintenant les remplir étape par étape, mais je veux
au moins configurer un composant de base dans chacun de ces écrans.
Je vais donc commencer dans l'écran des catégories et bien sûr, nous devons importer React à partir de React là-bas parce
que nous allons construire un composant React et nous allons également importer quelque chose à partir de React Native car, évidemment, nous allons construire un
composant React ici qui utilise certains composants React Native. Pour être précis, je vais commencer simplement ici
et importer une vue et un texte de React Native puis créer mon composant, l'écran des catégories
dans ce cas qui prend des accessoires ou qui pourrait recevoir des accessoires au moins parce que c'est un composant React
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
nous en aurons besoin et si nous ne le faisons pas, nous pouvons toujours la supprimer plus tard.
Je vais donc configurer mes styles ici
avec la création de feuilles de style, comme ceci.
Donc, c'est un composant React très basique, ne rend rien cependant,
donc à l'intérieur de la fonction du composant ici, nous devrons retourner quelque chose et que quelque chose
est du code jsx où je veux rendre une vue et là-dedans, un texte et ici je dis l'écran des catégories.
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
où je mets flex à un, puis justifie le contenu au centre et aligne les éléments au centre et
comme vous l'avez appris, cela fera une
chose, il centrera le contenu sur l'écran, il finira donc par centrer ce texte sur l'écran.
Ceci est le composant de base et je vais copier ce contenu dans tous les autres écrans et
bien sûr, ce n'est pas le contenu final que nous aurons là-bas, juste du contenu factice afin que
nous puissions commencer à naviguer entre certains de ces écrans et voir quelque chose .
Donc ici, nous avons l'écran de repas de catégorie, c'est ce composant ici et c'est donc ce que
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
écran préféré et bien sûr, par conséquent exporter
l'écran préféré ici et
là,
je peux dire l'écran des favoris, le copier
dans l'écran des filtres et faire la même chose là-bas,
c'est l'écran des filtres, je l'ai
renommé et j'ai exporté cela et dis aussi l'écran des filtres ici dans notre
texte et enfin et surtout, c'est le MealDetailScreen.
Nous avons donc ici le
MealDetailScreen, je vais aussi le nommer MealDetailScreen ici et exporter le MealDetailScreen.
Donc, avec cela, nous avons tout configuré dans ces écrans, maintenant nous avons presque
terminé toute la préparation, je veux juste ajouter des
polices spéciales à cette application et par la suite, nous allons plonger directement dans l'ajout de navigation.