Nous travaillons donc avec le navigateur de pile.
Et le tirage au sort.
La logique est exactement la même.
Nous créons notre année navigateur de dessin d'atelier en appelant créer navigateur de dessin et tout comme le navigateur de pile.
Cette fonction ne veut aucun argument.
Au lieu de cela, nous allons configurer notre navigation de dessin dans une approche basée sur les composants ou papa, je vais créer un navigateur de boutique
ici et ce sera un composant de réaction.
Encore une fois, vous pourriez avoir cela dans un fichier séparé.
Je vais tout garder dans un seul fichier pour l'avoir côte à côte avec l'ancien code et dans leur retour, nous retournons la
boutique draw navigator dot navigator.
Même logique qu'auparavant Peu importe que ce soit un match nul.
Et là-dedans, nous avons maintenant deux écrans différents qui peuvent être chargés, le navigateur et réagir
à la navigation s'assurera automatiquement qu'un navigateur est créé pour que nous puissions l'ouvrir avec le même code que
nous avons utilisé auparavant, sans avoir à ajuster cela.
Donc, ici, nous avons maintenant notre écran de point de navigateur de dessin d'atelier et la justice avant de donner un nom à cet écran.
Ici, nous avons deux produits par exemple.
Et ce nom sera alors automatiquement utilisé à l'intérieur du navigateur de dessin.
Bien que vous puissiez également remplacer tout cela si vous le souhaitez et nous avons besoin d'un composant qui est chargé lorsque nous
cliquons sur ce lien dans le navigateur.
Et ici, c'est toujours le navigateur du produit.
Donc, tout comme auparavant, nous pouvons utiliser nos navigateurs de pile même s'ils utilisent maintenant cette approche basée sur les composants en
tant que composants qui devraient être créés dans le cadre d'un autre navigateur dans ce cas, dans le cadre du
navigateur de dessin.
Nous pouvons toujours pointer nos navigateurs de pile en tant que composants ici car ce sont des composants cette année.
Il s'agit d'un composant et il en va de même pour tous nos navigateurs.
Nous créons ici ce sont tous des composants réactifs qui contiennent leurs composants spécifiques de logique de navigation
demandés et les composants globaux comme le navigateur de produits ici peuvent être utilisés dans un navigateur de dessin,
donc je vais le reproduire deux fois afin que nous puissions également ajouter nos commandes ici avec le navigateur de commandes et l'administrateur ici avec le navigateur
d'administration et assurez-vous que vous n'avez aucune erreur dans vos noms car nous les utilisons partout dans l'application
et cette logique n'aura pas besoin d'être ajustée.
Donc, si vous gâchez les noms ici, d'autres parties de l'application ne fonctionneront pas correctement.
Alors maintenant, nous avons mis en place ce navigateur de dessin et maintenant la configuration.
Il y a maintenant deux choses que nous devons considérer.
D'une part, nous devons configurer ici pour le contenu du tirage.
Et deuxièmement, nous voulons configurer nos différents écrans comme le navigateur du produit ou le navigateur de la commande
pour avoir vos propres icônes dans le tiroir.
Commençons par les icônes.
Auparavant, nous avons mis en place que je peux directement dans la configuration du navigateur de pile
que nous voulions utiliser dans un dessin maintenant avec l'approche basée sur les composants.
Nous ne faisons plus ça.
Au lieu de cela, nous pouvons simplement saisir cette partie ici, nous sommes en fait tout cet objet que nous avons précédemment configuré
sur le navigateur de pile et descendre à notre dessin.
Et maintenant ici sur cet écran auquel il appartient.
Dans ce cas, il appartient donc au navigateur d'administration.
Donc, ici, sur l'écran d'administration, nous passons à nouveau nos options comme nous l'avons fait une seconde, je vais sur le navigateur de la pile.
Donc, ici, nous passons maintenant les options pour cet écran et cela pourrait être un composant normal ou comme c'est dans ce cas un
composant avec notre logique de navigation de pile et deux options nous passons un objet et là nous pouvons réutiliser
cet objet que nous avons utilisé auparavant.
Donc, un objet avec un tirage au sort, je peux saisir où nous en avons l'œil et ainsi de suite.
Donc, tout cela fonctionne bien avant un petit ajustement, mais nous obtenons maintenant des accessoires ici également alimentés par la navigation de réaction
et ces accessoires auront une clé de couleur au lieu de dessiner la couleur de teinte active et la couleur sera toujours la bonne
couleur parce que la navigation réagit derrière le Les scènes contrôleront où cela se fait
sur l'écran actuellement actif ou non et ajusteront les valeurs stockées dans cet accessoire de couleur.
J'ai déjà mis en évidence une couleur déjà mise en évidence.
C'est donc un petit ajustement que nous devons faire ici bien et avec lequel nous pouvons copier
la logique des autres navigateurs ainsi que du navigateur de l'ordre, prenons cet objet
ici que nous avions et ses options de navigation descendent au tirage aux commandes l'écran ajoute la clé d'options et est un objet et
un commentaire il est de retour et il est important que nous obtenions maintenant des accessoires qui auront cette clé de couleur comme ça
et enfin, mais bien sûr, faisons cela pour l'écran des produits pour le navigateur de produits.
Ici, nous avons cet objet, saisissons-le, descendons dans notre dessin,
notre navigateur et voici notre écran de produit, configurez la clé d'options ici.
Je l'ai passé et ajusté comme je viens de le montrer.
Alors maintenant, nous avons ici notre configuration spécifique à l'écran.
Vous pouvez maintenant dire qu'en est-il du tirage global, car auparavant dans l'application avec l'ancienne navigation
React dans laquelle nous avions réellement notre tirage et nous configurons la couleur de teinte active ainsi que le contenu
du tirage.
Eh bien, vous pouvez toujours le faire avec cette nouvelle approche.
Nous allons à notre navigateur de dessin, où nous configurons le navigateur global et nous le configurons via des accessoires comme
auparavant.
Il s'agit de composants et d'accessoires, donc ici, nous avons maintenant un nom différent, nous n'avons plus d'options
de contenu et de composant de contenu à la place.
Et vous pouvez le trouver dans les documents officiels.
Nous avons maintenant des options de dessin de contenu et de dessin.
Cependant, les valeurs sont exactement les mêmes à la fin.
Nous pouvons donc saisir notre objet d'options de contenu
ici et passé comme pour dessiner une option de contenu ici et le commenter dans et avant pour dessiner un contenu.
C'est aussi presque la même chose.
Nous emballons simplement ce composant
ici jusqu'à ici.
Copiez-le
et transférez-le ici dans le contenu du dessin et commentez-le.
Cependant maintenant deux choses importantes utilisent ce patch n'est pas autorisé ici.
Vous devriez le faire en dehors d'ici.
Ainsi, par exemple, ici, dans le navigateur de la boutique, le composant est imbriqué.
De plus, il ne s'agit plus de dessiner des éléments, mais de dessiner une liste d'éléments que nous devons également importer en
haut du tirage de réactivation.
Nous importons donc ici la liste des éléments de dessin
avec.
Cependant, si je fais défiler vers le bas, cela devrait maintenant fonctionner à nouveau et cela devrait maintenant
être notre tirage au sort, nous avons donc le navigateur de la boutique, nous avons
tous ces navigateurs de pile. écran ou l'écran de la boutique ou faites vos piles de navigation respectives,
je dois dire.
Eh bien, c'est ce que nous allons travailler ensuite.