Travaillons donc à porter toute notre logique ici dans le navigateur d'application.
Nous avons commencé avec cette pile factice ici et c'est bien mais finalement pas ce dont nous avons besoin.
Maintenant, c'est à vous de décider où vous effectuez cette configuration, mais puisque nous l'avons fait essentiellement dans le fichier de navigation
de la boutique auparavant.
Je vais également continuer de le faire là-bas.
Même avec cette nouvelle logique.
Donc, ce que je vais faire, c'est un navigateur d'application.
Je vais en fait me débarrasser de ma pile ici et je vais me débarrasser de cette importation et je m'en
débarrasserai ici Je laisserai le conteneur de navigation et je réinitialiserai cette importation, mais en fin de compte, cela
changera un peu.
Mais maintenant, passons au navigateur de magasin, tout d'abord, nous pouvons supprimer cette importation de React Navigation, vous n'en
aurez pas besoin.
Laissons le reste pour le moment, mais au lieu de cette importation supprimée, nous pouvons importer à partir de la pile de
navigation React et tout est déjà à partir du tirage et de la pile d'annonces, nous importons créer le navigateur de pile à partir du tirage
barre oblique, nous importons créer le navigateur de dessin.
Maintenant, nous pouvons faire défiler vers le bas et laisser les options de navigation par défaut ici en fait.
Heureusement, le nom sonne et comment vous configurez généralement les choses et ce que vous pouvez configurer n'a pas
vraiment changé la façon dont vous appliquez la configuration modifiée et donc ce qui doit absolument changer
est cette partie ici notre premier navigateur de pile je vais pour l'instant dupliqué puis supprimé ou commenté pour avoir une comparaison côte à côte, je vais
créer une nouvelle constante que je nommerai navigateur de pile de produits juste pour que nous n'ayons pas de
conflit de noms et qu'il soit vraiment évident que cela contiendra une
pile de pages une pile de écrans et nous le faisons avec create stack navigateur avec cette fonction ce que je
vous ai montré avant que cette fonction ne prenne plus de paramètres à la place je vais créer une nouvelle constante ici les produits
Navigator.
Alors maintenant, nous avons un conflit de noms, mais cela sera supprimé de toute façon.
Et ceci est maintenant un composant réactif du composant fonctionnel et nous pourrions descendre pour tous les stockés
dans un fichier séparé juste pour cette comparaison côte à côte et parce que nous avions tout dans ce
fichier avant je vais maintenant configurer tous ces composants de navigateur avec notre navigation la configuration ici dans ce
fractionnement de fichier unique, c'est certainement quelque chose que vous pourriez envisager.
Voici donc notre navigateur de produits et là, je vais maintenant retourner la pile de produits Navigator Dot Navigator comme vous
l'avez appris et dans leur écran de points de navigateur de pile de produits et nous avions trois écrans auparavant, donc je vais
reproduire cela deux fois.
Nous avions donc trois écrans là-dedans.
Maintenant, nous pouvons les configurer, attribuons un nom au premier écran et ce sera l'aperçu des produits.
Maintenant, le composant qui doit être chargé est notre composant d'écran de présentation des produits.
Donc, fondamentalement, ce que nous avons cartographié auparavant et maintenant pour le deuxième écran, le nom est le détail du produit.
Donc, ce que nous avions ici et assurez-vous de conserver ces noms afin que
toute la logique de navigation que vous avez dans votre application, car cela ne doive pas être modifiée pour que
cela fonctionne toujours et ici le composant qui devrait être chargé lorsque nous voulons atteindre cet écran
est le composant d'écran détaillé du produit, tout comme nous en avions un là-bas, reformons-le et pour le dernier écran, le nom est chariot.
Ce que nous avions ici et nous voulons aller à l'écran cardiaque comme ça.
Alors maintenant, nous avons configuré cette pile de navigation avec cette nouvelle logique basée sur les composants.
Maintenant, nous pouvons importer dans le navigateur d'application et pour papa, nous devons simplement
ajouter un mot-clé d'exportation en face de lui afin que cette constante ce composant soit exporté ici dans ce fichier
et dans le navigateur d'application, nous n'importons pas maintenant le navigateur de la boutique mais nous importons le navigateur de produits nouvellement exporté que nous importons ici
et dans notre conteneur de navigation, nous pouvons maintenant ajouter le navigateur de produit comme ceci et nous pouvons
nous débarrasser de l'importation d'écran de présentation du produit.
Revenons maintenant au navigateur de la boutique.
Jetons un œil à ces options.
Ensuite, les options de navigation que nous avions ici sur cette pile.
Que faisons-nous avec ça.
Eh bien, nous avons en fait deux options ici sur notre navigateur de produits sur l'ancien navigateur avec
l'ancienne icône de la logique.
Cette pile devrait avoir dans le tiroir que nous ajouterons plus tard la seconde sont nos options de navigation par défaut qui
devraient être appliquées à tous les écrans qui font partie de ce navigateur.
Et en fait, il y a aussi un troisième endroit où nous configurons les choses dans le passé.
Et c'était sur certains écrans.
Jetons un œil à notre écran de présentation des produits qui se trouve dans le dossier de la boutique si nous faisons défiler vers le bas.
Nous avions cette propriété d'options de navigation que nous avons ajoutée à l'objet fonctionnel de l'écran de vue d'ensemble des produits et c'était une
fonction où nous configurons des choses comme le titre de l'en-tête mais aussi ce qui se trouve
à gauche et à droite de l'en-tête maintenant avec cette nouvelle logique.
Vous ne faites plus ça comme ça.
Au lieu de cela, nous pouvons copier l'ensemble de cette configuration ici.
Donc, tout cela, nous pouvons le copier.
Nous pouvons le commenter ici dans le composant écran et aller au composant navigateur d'application.
Excusez-moi de magasiner le composant navigateur où nous avons configuré notre navigation de pile et maintenant
sur l'écran où nous voulons avoir ces options, nous pouvons ajouter un troisième accessoire et c'est la propriété de options et deux options.
Vous pouvez analyser exactement ce que vous aviez dans le composant avant, donc vous passez de la fonction à une fonction
correcte.
Qui reçoit le paramètre
de données NAF qui renvoie ensuite un objet de configuration, la valeur concrète de ce paramètre sera alimentée par
Reaction Navigation et les noms de configuration que nous pouvons définir ici, les choses que nous pouvons configurer n'ont pas
changé.
Nous pouvons donc toujours définir un titre d'en-tête avant ou à gauche.
Donc, tout cela est exactement le même que vous avez appris.
Cela fonctionne exactement de la même manière.
Heureusement, nous pouvons le faire ici et naviguer dans le navigateur.
Mais bien sûr, cela deviendrait rapidement très très important si nous avions toutes les différentes configurations
spécifiques à l'écran ici.
Ce n'est donc pas ce que je vais faire ici.
Au lieu de cela, je vois deux options.
La première est que nous faisons notre configuration à partir de l'écran de navigation de la pile de produits dans le composant d'écran.
La deuxième est que nous ne conservons que nos options et c'est l'approche que je suivrai.
Donc, de retour dans l'aperçu du produit, je commenterai cela, mais maintenant, ici, nous ne définissons plus le fonctionnement comme
une valeur pour les options de navigation, mais nous l'exportons simplement comme une constante une constante à laquelle nous devons donner
un nom et je '' ll nommera ces options d'écran aucune option d'écran ne détient cette fonction et nous l'exportons par
son nom.
Il ne se heurte pas à l'exportation des composants car nous le faisons ici avec la valeur par défaut.
Alors maintenant, nous exportons est une fonction de configuration, puis le navigateur de la boutique, nous pouvons donc l'importer.En
plus d'importer l'écran de présentation des produits à partir de ce fichier, nous pouvons maintenant
combiner cela avec une importation nommée où nous importons dans la fonction d'options d'écran, puis ici deux options sur cet écran.
Je passe juste un pointeur sur cette fonction, ne l'exécute pas, je la pointe.
Réagissons la navigation exécutée pour vous afin qu'elle puisse tenir dans la valeur
concrète de cette fonction de paramètres de données NAF une fois et avec cela cet écran est configuré.
Maintenant, si nous enregistrons cette annonce, elle se heurte parce que nous avons ce nom en bas.
Donc, pour résoudre ce problème, assurons-nous que nous prenons tous en charge les autres options.
Maintenant, l'option de dessin spécifique est quelque chose que j'examinerai plus tard une fois que nous aurons ajouté un tirage pour les options
de navigation par défaut.
La bonne nouvelle est que nous pouvons toujours appliquer ceux que nous n'avons pas besoin de tout configurer au niveau de l'écran.
Si nous avons une configuration partagée qui affecte tous les écrans d'un navigateur.
Et comment pensez-vous que nous pouvons configurer de telles options générales pour tous ces écrans gratuits ici.
Eh bien, nous les avons installés directement sur le navigateur là-bas.
Nous avons également une petite propriété d'options d'écran, donc pas d'options nommées mais d'options d'écran.
Mais ce sont les options qui seront appliquées à chaque écran ici et les options spécifiques à
l'écran seront fusionnées avec ces options générales comme précédemment dans le cours.
Maintenant, nous passons notre objet d'options de navigation par défaut.
Donc, cet objet là-haut, je viens de nourrir cela comme une valeur pour les options d'écran et c'est tout.
Maintenant, nous pouvons commenter en tant que navigateur de produits ici et tout enregistrer.
Maintenant, une fois que nous faisons cela, nous ne pouvons toujours pas voir le résultat car dans ce fichier de navigateur de boutique,
nous avons toujours beaucoup de code qui utilise l'ancien navigateur ou cette ancienne logique de navigateur et qui pose problème ici.
Maintenant, afin de voir un résultat, je vais temporairement commenter tout cela temporairement et enregistrer à
nouveau.
Pour que cela se reconstruise et que vous voyez, nous obtenons maintenant une erreur.
Eh bien, il y a une chose que nous devons réellement ajuster et le composant de présentation du produit
dans notre option d'écran orienter l'en-tête à gauche.
Cela doit maintenant être la fonction ici qui renvoie notre balisage de marque JSA X et la même chose pour l'en-tête à droite.
Nous devons donc convertir les deux en fonctions et vous pouvez simplement le faire en ajoutant une liste de paramètres vide
puis la flèche ici.
Note latérale, vous pouvez accepter le paramètre ici si vous le souhaitez et ce serait des accessoires, car il s'agit
en fait d'un oiseau réactif qui trouve ici une valeur concrète pour les accessoires sera alimentée
et par la navigation de réaction et les valeurs que vous pouvez obtenir à partir de là peuvent être
trouvé dans les documents officiels avec cet ajustement fait si nous sommes maintenant en sécurité, il redémarre maintenant ici et nous voyons à nouveau cet écran.
Reprenant définitivement notre configuration.
Gardez à l'esprit que le tirage au sort ne fonctionnera pas parce que nous n'avons pas encore ajouté le dessin
et la navigation, donc avec tout cela, nous avons appris comment configurer nos composants nos écrans et le navigateur de pile global
avec cette nouvelle logique avec cela fait.
Il est temps de continuer le portage. N'hésitez pas à faire les prochaines étapes par vous-même et un port
pour filtrer les options spécifiques pour les détails du produit et l'écran de la carte, puis nous passerons à la prochaine
pile.
Et puis bien sûr aussi poursuivre le tirage au sort.