Travaillons sur l'écran des commandes avant d'ajouter la navigation, nous n'avons pas besoin de
la terminer mais je veux pouvoir la visualiser.
Donc là-dedans, j'importe React à partir de React pour pouvoir créer un composant React valide, importer quelque chose à partir de React Native
comme toujours et que quelque chose est aussi ce à quoi nous sommes assez habitués, non?
Ce n'est jamais si surprenant.
Nous aurons
besoin d'une vue, nous aurons probablement besoin d'une liste plate car nous aurons potentiellement plusieurs commandes, un
montant infini et je veux pouvoir le rendre et avec cela ici, nous pouvons construire notre écran de commandes comme ça.
Je vais également exporter cela bien sûr et le style ne devrait pas vraiment être requis ici, en fait, nous ne devrions même pas avoir besoin de la vue
ici parce que je veux simplement afficher ma liste de commandes. Donc, bien sûr, les données dont nous avons besoin
ici proviendront de Redux, nous devons
donc importer le sélecteur d'utilisation de React Redux qui nous permet d'accéder à la boutique Redux.
Donc ici, nous pouvons obtenir nos commandes à l'aide du sélecteur d'utilisation et le sélecteur d'utilisation pointe maintenant sur l'état. commandes et c'est bien sûr l'identifiant que j'ai attribué ici
dans les commandes de réducteurs combinés ici, cela nous donne accès à la tranche d'état gérée par
le réducteur de commandes et là, nous avons une
autre propriété de commandes qui contient le tableau réel des commandes.
Alors là, je dois accéder à l'état. ordres. commandes à la
fin, cela me donne mes commandes qui sont stockées dans Redux.
Maintenant, ici, nous avons juste besoin de retourner notre liste plate et celle-ci reçoit les commandes qui
devraient être un tableau et qui sont des données. Désormais, un extracteur de clé n'est plus requis dans les nouvelles versions de React Native
car chaque commande si vous regardez le modèle a un ID et les versions plus récentes de React
devraient le rechercher, mais pour être sûr, je vais l'ajouter ici et le rendre l'élément devrait maintenant bien sûr contenir une fonction qui reçoit les données de l'élément et qui,
à la fin, retourne tout ce que nous voulons rendre par commande. Maintenant, un article de commande sera plus complexe à l'avenir, pour l'instant
je
vais simplement sortir du texte, encore une fois afin que nous ayons rapidement quelque chose à l'écran que
nous puissions voir avant d'affiner cela.
Le texte ici pour l'article donné pourrait être et maintenant regardons
la commande, nous avons l'ID, nous avons les articles qui sont encore une autre liste,
donc
la chose la plus simple à afficher est simplement le montant. Alors ici, je vais juste sortir le montant total
de la propriété que ma commande a ici.
C'est ce que je produis
dans la liste plate, nous avons maintenant un écran
de commandes de base, bien sûr, nous devons maintenant être en mesure d'atteindre cela. Alors, allons dans le navigateur de la boutique et importons
l'écran des commandes ici, l'écran des commandes du dossier screens, de l'écran des commandes de la boutique et maintenant la chose importante est que je ne
veux pas l'ajouter à ce navigateur de pile car cela ne fait pas partie de cela pile, au lieu
de cela,
je veux y accéder avec un menu, avec un menu latéral.
Nous devrons donc créer un navigateur de tiroir.
Bien sûr, vous pouvez également travailler avec des onglets si vous préférez cela, mais je veux travailler avec un tiroir ici,
nous avons donc besoin de ce navigateur de tiroir.
Maintenant, l'écran des commandes, même si ce sera le seul élément, il devrait être dans sa propre pile,
de sorte que nous ayons également un en-tête.
Par conséquent, je vais créer un nouveau navigateur de commandes ici où je crée un autre navigateur de pile et là, le seul mappage dont j'ai besoin est les commandes qui pointent
vers l'écran des commandes, le deuxième argument ici devrait toujours configurer des options de navigation par défaut et j'utiliserai les mêmes options que je
fais ici, donc je vais en fait saisir cet objet, le
couper d'ici et le stocker dans une constante séparée, des options de navigation par défaut, comme ceci, c'est un modèle
que j'ai également déjà utilisé dans
le module de navigation parce que maintenant, nous pouvons utiliser cette constante ici dans le
navigateur de produits pour les options de navigation par défaut et aussi ici dans le navigateur de commandes.
Maintenant, bien sûr, l'objectif est de créer un navigateur de tiroir que je nommerai globalement navigateur de magasin car il combine
différentes fonctionnalités de la boutique que vous
pourriez dire à l'aide de la création de navigateur de tiroir. Là, je veux maintenant fusionner ces deux
piles, le navigateur de produits et le navigateur de commandes,
donc ici nous avons besoin des produits avec le navigateur de produits et les commandes pointant sur le
navigateur de commandes, donc sur ces navigateurs de pile. Je veux également configurer mes options de contenu dans
le tiroir, cela me permet par exemple de définir la couleur de teinte des éléments lorsqu'ils sont
sélectionnés et là, je veux définir la couleur de teinte active sur Couleurs. primaire afin qu'ils soient colorés avec la couleur primaire s'ils sont sélectionnés.
Maintenant, c'est le navigateur de la boutique qui doit être renvoyé ici. Cela ne suffira pas à lui seul, mais c'est une
première étape, maintenant
avant d'ajouter le bouton de menu, allons à l'écran des commandes et ajoutez-y un titre, donc j'y ajouterai des options de navigation, définissez-le sur
un objet, en ce moment, nous n'avons pas besoin
d'options dynamiques ici parce
que je veux simplement définir le titre de l'en-tête de vos commandes et maintenant que j'y pense, nous devrions
également
l'ajouter sur l'écran du panier
où je ne le fais pas encore. Là, je veux
également définir cela sur l'écran du panier, définir cela sur votre panier.
Donc, c'est maintenant dans les options de navigation de l'écran
du panier, c'est dans l'écran des commandes ou ce navigateur est configuré. Avec tout cela mis en place, nous devons ajouter
ce bouton de menu, cette icône de hamburger par exemple sur l'écran de présentation des produits où je veux pouvoir ouvrir
le tiroir et aller à mes commandes. Maintenant, pour l'ajouter ici, allons aux options
de navigation de l'écran de présentation du produit qui est déjà dynamique, ce
qui
est bien, puis en plus d'ajouter le droit d'en-tête pour cette icône de panier, ajoutons headerLeft et
headerLeft devraient également contenir des boutons d'en-tête bien sûr, mais là , ce seront mes éléments de menu, donc je vais le nommer
tel et là, je veux utiliser le menu md ou le menu ios en fonction de la plate-forme sur laquelle nous fonctionnons
et je veux bien sûr
naviguer nulle part, plutôt avec la navigation accessoire ici pour ainsi dire, je veux appeler le tiroir à bascule qui
ouvrira le tiroir latéral. Maintenant, cette même
configuration est également requise dans l'écran des commandes afin que nous puissions quitter cet écran.
Donc en fait ici, nous aurons besoin de cette configuration dynamique des options de navigation où nous
avons ici une fonction dans laquelle nous retournons notre objet de configuration afin que là-dedans, nous puissions également ajouter headerLeft avec
les boutons d'en-tête, avec notre menu qui bascule le tiroir qui s'appuie sur les données de navigation ici
et bien sûr pour cela, nous devons importer les boutons d'en-tête, le bouton d'en-tête et l'article, donc à la fin sur l'écran
de présentation du produit, je dois importer
ces choses ici, ces deux lignes doivent être ajoutées à l'écran des commandes également.
Alors là, permettez-moi de
l'ajouter, en ajoutant les boutons d'en-tête et l'importation d'articles à partir des boutons d'en-tête de navigation React
et l'importation du bouton d'en-tête de notre composant personnalisé. Maintenant, avec cela, si nous enregistrons cela, nous devrions avoir un
bouton de menu ici et nous le faisons, il ouvre le tiroir, nous pouvons aller aux commandes et je reçois une erreur ici parce
que dans l'écran de commande, bien sûr j'utilise
la plate-forme API, nous devons donc l'importer là-bas, faisons
cela, ajoutons une plate-forme et maintenant, si nous revenons en arrière, nous pouvons passer aux commandes et là, nous pouvons également revenir en arrière et la même chose est le cas sur Android.
Maintenant, avec cela, nous avons ajouté le tiroir.
Il y a une chose que je veux ajouter au
tiroir mais que je n'ai pas fait avant avant de continuer à travailler sur ma liste de commandes, nous ne sortons
encore rien parce que nous n'ajoutons pas vraiment de commandes, nous n'avons pas connecté ceci bouton commander maintenant, nous ne
voyons rien qui change si nous ajoutons quelque chose au panier, cliquez sur commander maintenant
une fois, en cliquant plusieurs fois dessus, vous obtiendrez une erreur maintenant et nous
verrons cette commande ici. Maintenant, nous devons vider le panier,
c'est une autre chose que nous devons faire, mais avant de le faire, dans le tiroir, je veux également
avoir des icônes à côté de mes entrées ici et ajouter ces icônes est en fait très simple, havre ' t fait
cela dans le module de navigation, mais nous allons le faire maintenant. Pour ajouter des icônes, il vous suffit d'accéder aux écrans dans
lesquels vous naviguez et dans notre cas,
ce sont bien sûr ces deux navigateurs, donc ce ne sont pas des écrans mais ces deux navigateurs
et sur ces navigateurs ou si c'étaient des écrans , sur ces écrans, vous pouvez définir des options de navigation
et avec cela, je ne parle pas des options de navigation par défaut que vous définissez pour tous les écrans de
ce navigateur, mais vous définissez pour ce navigateur s'il est utilisé à l'intérieur d'un autre navigateur comme c'est le cas ici.
Nous pouvons donc ajouter des
options de navigation ici, encore une fois cela ne sera pas appliqué aux
écrans de ce navigateur mais à la place, cela
configurera ce navigateur s'il s'agit d'un écran d'un autre navigateur et ici le navigateur des commandes est un écran du navigateur
de la boutique à la fin et là, dans ces options de navigation, nous pouvons ajouter une entrée d'icône de tiroir qui peut être une fonction qui obtient disons la configuration de
tiroir, cette fonction est appelée pour vous par React navigation et elle vous donne cette configuration de
tiroir qui vous dit le plus important par exemple quelle est votre couleur de teinte car ici vous pouvez maintenant retourner
un composant, comme un composant Ionicons pour rendre une icône. Pour cela, vous devez simplement vous assurer que vous importez
des Ionicons à partir
de @ expo / vector-icons, vous devez donc ajouter cette importation dans
le fichier de navigation de la boutique et maintenant avec cela ajouté, si nous descendons ici, je renvoie mon Ionicon, maintenant
je peux
le configurer comme je l'ai toujours fait et pour cela, nous pouvons utiliser l'API de la plateforme que
nous importons déjà ici, si vous ne l'êtes pas, assurez-vous de le faire. Nous pouvons l'utiliser pour vérifier le système d'exploitation et s'il est
égal à Android, alors ici, je rendrai md create
sous forme d'icône, sinon iOS create et ce n'est qu'une icône que j'ai choisie à l'avance.
Maintenant, bien sûr, nous pouvons également configurer la taille ici et je m'en tiendrai à mon bon vieux 23 et en plus de cela, définissez
une couleur si vous le souhaitez et maintenant bien sûr, cela ne devrait pas être des couleurs primaires
car alors cette icône serait ayez toujours cette couleur, à la place cette couleur devrait être assignée par le tiroir
qui est la chose qui sait si l'article est sélectionné ou non et qui changera la couleur de manière appropriée.
Alors ici, vous devriez accéder à la configuration du tiroir. TintColor et cela vous
indique quelle couleur cela devrait avoir pour le moment et cette couleur de teinte changera selon
qu'elle est actuellement sélectionnée ou non.
Maintenant, c'est le cas pour mes commandes, excusez-moi, l'icône
ici devrait
être la liste md et la liste iOS, pas créer. Voilà donc ma configuration de commande maintenant avec les icônes de liste et bien sûr, cette
même chose peut être faite ici en la copiant sur le navigateur de produits et là, je veux utiliser md cart ou iOS cart, donc
cette icône de panier à nouveau et maintenant c'est presque prêt à être utilisé. Une chose que vous devez faire cependant est que vous
devez importer React de React maintenant dans ce fichier de navigateur car vous
utilisez maintenant des composants avec cette syntaxe jsx. Comme vous le savez, jsx
est compilé ou converti en React. createElement à la fin et vous devez donc importer React pour
que cette syntaxe fonctionne ici.
Maintenant, si vous revenez en arrière, vous avez ces belles icônes ici à côté de vos articles
et elles sont
également colorées correctement, également ici sur Android bien sûr.
Alors maintenant que le tiroir latéral est terminé, nous pouvons également accéder à l'écran des commandes et même y voir
une commande.
Cependant, en ce moment, le panier n'est pas effacé et donc si vous cliquez dessus plusieurs
fois, vous obtiendrez en fait un avertissement, car ce que vous faites, c'est que vous cliquez dessus trop rapidement
et que vous créez donc plusieurs commandes avec le même pseudo-identifiant unique où nous à la fin, utilisez l'horodatage actuel, si vous
cliquez plusieurs fois trop vite, c'est le
même horodatage, c'est pourquoi cet avertissement arrive et je voudrais quand même effacer le panier après avoir passé une commande.
Donc, assurons-nous de vider le panier après avoir passé une commande, puis bien sûr, assurons-nous de sortir les commandes
d'une manière plus agréable que ce que nous faisons actuellement.