Maintenant que nous avons le flux de base vers le bas, que nous pouvons naviguer entre nos produits, les ajouter au panier
et ensuite utiliser le panier pour passer une commande et également afficher cette commande et bien sûr, également modifier le
panier si nous
le voulions, maintenant que tout cela est fait, il est temps de passer à la dernière partie de cette
application qui est bien sûr la partie où vous pouvez ajouter de nouveaux produits.
C'est également la partie que nous affinerons plus tard, car plus tard, nous approfondirons bien sûr la gestion des entrées utilisateur et nous
stockerons même ces données sur un serveur, mais nous pouvons déjà commencer ici. Pour commencer, l'écran du produit utilisateur et l'écran
de modification
du produit deviendront importants maintenant car ce sont les écrans où nous
voyons tous nos produits et où nous pouvons également modifier les produits.
Commençons donc avec l'écran des
produits utilisateur et transformons-le en composant React en important React
depuis React et sans surprise, en important des trucs depuis React Native. Le truc que je veux importer ici est à nouveau la liste
plate car je sortirai une liste de produits à la fin sur
cet écran de produits utilisateur.
Par conséquent, ici, nous avons le composant d'écran des produits utilisateur qui reçoit les accessoires et
où je dois ensuite retourner du jsx et au bas du fichier, j'exporterai ce composant par défaut.
C'est ma configuration de composant par défaut que j'ai utilisée maintes et maintes fois. Maintenant ici, je veux sortir mes composants,
mes produits avec une liste plate et je vais réutiliser le composant d'élément de produit que nous
avons construit plus tôt.
Donc, de retour dans les produits utilisateur, nous pouvons
importer l'article de produit à partir du dossier des composants, alors
allons-y ici et là, pour acheter et ensuite commander, pas commander mais l'article de produit et
ici, bien sûr, également transmettre certaines données. Maintenant, les données que je souhaite transmettre ici doivent être
les produits qui appartenaient à mon utilisateur connecté.
Nous n'avons pas d'utilisateur connecté pour le moment, mais si vous vous souvenez du réducteur de produits, nous
y faisons semblant car nous avons ce tableau de produits utilisateur qui contient tous les produits qui dans ce
cas ont ici un ID utilisateur, un ID propriétaire de U1 et je suppose pour le moment d'avoir des données factices que ce sont nos données
utilisateur actuellement connectées, plus tard, cela sera bien sûr dynamique. Donc, le produit utilisateur est ce dont
nous avons besoin, de retour dans l'écran des produits utilisateur, nous devons donc
obtenir ces données de Redux à l'aide du sélecteur d'utilisation de React Redux, comme
ceci et ici nous obtenons nos produits utilisateur en appelant le sélecteur d'utilisation où nous passons dans cette fonction, il obtient l'état, puis atteint la
partie produits de nos produits de magasin, car c'est l'identifiant que j'utilise là-bas, puis comme
je viens de le dire, accédez à ce champ de produits utilisateur ici, donc dans l'écran du produit
utilisateur, ici nous accès . produits utilisateur. Les produits utilisateur sont maintenant le tableau que
nous alimentons en données, comme toujours ici, j'ajouterai un extracteur de clé qui me donne l'ID parce que mon produit tel qu'il est stocké ici dans
les produits utilisateur utilise bien sûr mon modèle de produit à la fin et a donc
un ID qui est un identifiant unique que je peux utiliser donc je vais l'utiliser et puis bien sûr comme toujours,
nous devons également ajouter un élément de rendu, vous connaissez évidemment déjà ce modèle. L'élément de rendu obtient les données de l'article ici et je veux retourner un
nouvel article de produit pour chaque entrée ici et l'article de produit, si nous y jetons un coup d'œil, prend quelques informations.
Il faut un accessoire de détail en vue ici, il faut un accessoire de titre, un accessoire de prix, un accessoire d'image, puis également un accessoire
d'ajout au panier.
Maintenant, vous pourriez déjà voir que tous ces accessoires ne correspondent pas vraiment à notre objectif si nous utilisons
cela sur l'écran du produit utilisateur, car ce ne sera pas un écran où nous pourrons acheter des produits, ce n'est
pas un écran où je veux pouvoir ajouter produits à un panier. Je veux les afficher comme je le fais ici avec l'image, le prix,
etc., mais je me fiche de savoir si nous pouvons les cliquer ou ces boutons. Je vais donc commencer à ajouter l'article
de produit comme celui-ci, mais nous devrons le peaufiner.
Donc, ce dont nous avons besoin, c'est du titre, du prix, de l'image et des détails de la vue et du panier.
Nous avons donc besoin de l'image ici et bien sûr, c'est itemData. article. imageUrl car vous ne
devez pas oublier cet itemData. item dans les points de terminaison d'un produit
tel que défini ici dans le modèle, nous aurons donc cette propriété imageUrl, puis ici nous avons également besoin du titre qui est
accessible via itemData. article. Titre. Nous avons besoin du prix accessible avec itemData. article. prix et si nous jetons
un coup d'œil au composant de l'article de produit, cela répond à tout ce dont nous avons besoin
ici, mais maintenant nous devons voir les détails et ajouter au panier et je les ajouterai temporairement mais nous devrons trouver une solution
différente ici.
Donc, sur le détail de la vue est
une fonction vide pour le moment et sur ajouter au panier, également une fonction vide et nous l'implémenterons différemment plus tard.
Pour le moment cependant, je produis un article de produit ici et donc
nous pouvons maintenant naviguer vers l'écran des produits utilisateur. Pour y arriver, il est temps de revenir au navigateur de la boutique et à
la fin, je veux les ajouter à mon navigateur de tiroir, mais en tant que pile distincte, tout comme les produits et les commandes sont
une pile séparée, cela devrait également être une pile distincte .
Nous pouvons simplement copier la pile du navigateur de commandes ici, répliquer cela et importer l'écran du produit utilisateur ici,
donc l'écran des produits utilisateur du dossier screens, là du dossier utilisateur, puis l'écran du produit utilisateur et le mapper
dans la pile nouvellement copiée là-bas qui Je ne nommerai pas le navigateur de commandes parce que j'ai déjà
ce nom ici, mais je le nommerai, disons administrateur navigateur peut-être et ici, j'ai mon identifiant de
produits utilisateur qui pointe vers l'écran des produits utilisateur. Maintenant ici en tant qu'icône, dans le tiroir,
je veux avoir une icône md create et ios create et à part ça, ça devrait aller.
Il ne nous reste plus qu'à ajouter ce navigateur à notre navigateur de tiroir.
Là, j'ajouterai la clé d'administration et pointerai sur le navigateur d'administration, alors maintenant nous devrions
réellement être en mesure d'atteindre cela. Si nous revenons à l'application, nous avons l'entrée
admin et si je clique dessus, nous obtenons un problème concernant mes produits utilisateur,
l'état non défini n'est pas un objet, jetons un coup d'œil à l'écran du produit utilisateur,
oui, cela devrait être des produits parce que notre tranche est nommée ici produits en réducteur combiné.
Alors là, ça devrait aussi
être des produits, petite faute de frappe de mon côté. Maintenant, cela a l'air mieux et maintenant, cela pourrait sembler que rien n'a
changé, mais en fait, vous pouvez voir que mes éléments de navigation ont disparu parce que maintenant je suis sur un nouvel écran mais j'ai ma
vieille liste ici mais avec moins de produits.
Si vous comparez Android où je suis sur l'écran de démarrage, nous avons plus de produits
là-bas, maintenant je n'ai que ceux où U1 est l'ID du propriétaire.
Donc c'est
bien mais bien sûr je n'aime pas ces boutons ici et
je veux aussi avoir un élément de menu ici et un titre d'en-tête bien sûr.
Il y a certaines choses que nous devons corriger, ces boutons sont bien sûr la chose la plus importante ou la
chose la plus frappante qui ne va pas. Pourtant, je vais commencer
par l'en-tête, dans l'écran des produits utilisateur ici,
nous pouvons ajouter les options de navigation, l'écran des produits utilisateur. les options de navigation et là, définissez un titre d'en-tête
de vos produits par exemple et nous avons également besoin du bouton de menu, afin que nous puissions en fait aussi aller à l'écran de présentation
du produit et à partir de là, copier cet en-tête à gauche ici, revenir à
l'écran du produit utilisateur et ajoutez ceci ici.
Maintenant, cependant, nous avons besoin de cette forme de fonction des options de navigation où nous retournons
finalement un objet avec toutes les options là-dedans, c'est donc quelque chose que nous devons changer comme
ceci et nous devons également nous assurer d'importer l'élément des boutons d'en-tête et bouton d'en-tête.
Donc, de retour dans l'écran de présentation du produit, j'ai ces importations ici, copiez-les
à partir de l'écran de présentation du produit, accédez
à l'écran du produit utilisateur et ajoutez-les
comme ceci, par exemple pour que vous importiez tout
ce dont vous avez besoin.
Nous devons également importer une API de plate-forme, car nous l'utilisons également lors de la configuration des boutons d'en-tête.
Maintenant au moins, quand nous allons dans la zone d'administration, nous avons notre titre ici, nous avons à nouveau le tiroir, le bouton
de menu,
mais maintenant, qu'en est-il de ces boutons?
Nous devrons changer l'apparence de notre article.