Assurons-nous que nous pouvons aller à l'écran de détail du produit, cet écran ici
et pour cela tout d'abord dans le composant d'écran de détail
du produit, eh bien je vais configurer un composant en important
React depuis React. Puis là-dedans, nous
avons probablement aussi besoin de certaines choses de React Native, par exemple cela ne peut pas
vraiment faire de mal d'avoir une vue et un texte ici et aussi une feuille de style et
aussi le composant image, par la façon dont l'ordre de ces importations ici bien sûr n'a pas d'importance.
Je veux également avoir un bouton là-dedans parce que je veux avoir un bouton ajouter au panier ici
aussi et en fait aussi une vue de défilement parce que cette page de détail pourrait avoir une très longue description du produit ou pourrait être consultée
sur un très petit appareil et par conséquent, il doit certainement défiler afin que nous puissions
toujours voir tout le contenu. Avec cela ici, je
vais ajouter mon composant d'écran de détail du produit, encore une fois un composant fonctionnel où nous recevons des accessoires, je vais configurer ma
feuille de style ici avec la feuille de style. créez-le et stockez-le dans une constante des styles
et bien sûr exportez l'écran de détail du produit par défaut. Avec cela, commençons simplement et retournons une vue ici avec un
texte où nous disons l'écran de détail du produit qui est juste là pour que nous puissions voir que nous y avons navigué avec succès et que nous
pouvons réellement l'utiliser parce que nous devons retourner jsx à
avoir un composant valide parce que la première chose que je veux faire est d'ajuster la
navigation et pour cela dans le ShopNavigator. fichier js dans le dossier de navigation, nous
pouvons importer l'écran de détail du produit
ici à partir de notre dossier screens, le dossier de la boutique et là l'écran de détail du produit, c'est donc le fichier dans
lequel
nous venons de travailler bien sûr et mapper cela à un identifiant ici, je '' Je nommerai le détail
du produit ici.
Ces touches, comme vous l'avez appris dans la section de navigation, dépendent toujours de
vous, alors nous avons maintenant mappé cet écran.
Ce sera notre écran de démarrage car il s'agit de
la première paire valeur-clé, c'est un écran auquel nous pouvons aller cependant, nous pouvons y naviguer
et y aller, nous devons aller à notre écran de présentation des produits et lorsque nous cliquons sur la vue détail, c'est
finalement le signal que nous voulons aller à cet écran de détail du produit.
Donc ici, dans cette fonction, nous pouvons appeler la navigation des accessoires, cette fonction de navigation que vous avez apprise dans
la section de navigation, puis là, je vous
ai montré une syntaxe où vous passez dans un objet Javascript où vous
définissez un nom de route, qui pourrait être le détail du produit et qui vous mènera à l'écran.
Alors maintenant, nous enregistrons cela et nous
cliquons sur les détails de la vue, en effet, nous allons à l'écran de détail du produit. Maintenant, en tant qu'annotation dans la section de navigation, je vous ai
également
montré bien sûr que la syntaxe alternative à cela est que vous passez simplement le nom d'écran comme premier argument
pour naviguer, vous pouvez donc
le faire aussi et cela fonctionnera comme bien. Si nous testons également cela sur
Android, c'est ainsi que nous pouvons y aller.
Maintenant, évidemment, l'objectif n'est pas seulement d'aller là-bas, mais aussi de transmettre nos données ou notre ID du produit au moins afin que nous puissions
charger les données du produit à l'intérieur du composant. Par conséquent, comme deuxième argument ici, je passe un objet Javascript
qui sera mes paramètres pour cette action de navigation et là vous pouvez avoir toutes les paires
clé-valeur que vous voulez, je vais ajouter un champ ID produit ici, encore une fois ce nom est totalement à vous
cependant et ce sera itemData. article. id car itemData. l'article pointe vers un
seul produit qui a l'apparence que nous avons configurée ici dans les modèles et qui a un accessoire ID, donc
bien sûr nous pouvons y accéder ici et le transmettre. Avec cela, dans l'écran de détail du produit, nous pouvons extraire
cela bien sûr, c'est aussi quelque chose que vous avez appris plus tôt et que vous pouvez simplement pratiquer ici.
Nous pouvons obtenir notre ID de produit ici en appelant simplement props navigation get get param ID de produit et cela extraira
notre ID de produit des paramètres que nous avons reçus.
Maintenant, nous pouvons utiliser cet ID pour obtenir notre produit et bien sûr, nos produits sont stockés dans Redux.
Donc, à la fin, nous devons importer le sélecteur d'utilisation ici à partir de React Redux, afin que nous puissions l'utiliser pour
sélectionner un seul
produit, notre disons produit sélectionné, ce nom constant dépend bien sûr aussi de vous, est maintenant sélectionné avec l'aide du sélecteur
d'utilisation qui reçoit notre état, notre état Redux et ensuite nous pouvons percer dans la tranche de produits, encore
une fois ce nom de tranche est ce que vous utilisez ici dans les produits de réducteurs combinés dans mon cas et là, nous pouvons avoir accès
à tous les produits disponibles, mais de Bien sûr, ici,
je ne veux pas charger tous les produits disponibles, mais à la place, je
peux utiliser la méthode find pour trouver un seul produit avec cette fonction que je passe pour trouver qui s'exécute sur chaque élément du
tableau où nous obtenons le produit où cette fonction renvoie vrai et il devrait retourner vrai si l'ID du
produit que je regarde est égal à l'ID de produit que j'ai extrait des paramètres de la route.
C'est ainsi que nous sélectionnons un seul produit et ce produit unique peut ensuite être utilisé
ici, donc ici, nous pourrions produire le produit sélectionné. titre par exemple. Si nous sauvegardons maintenant cela et que nous voyons les détails, en
effet ici je
vois une chemise rouge, si je fais ça pour le tapis bleu, je vois du
tapis bleu ici, alors ça marche. Ce serait bien de
voir que dans
l'en-tête également et qu'il y a deux options, nous pourrions maintenant utiliser des accessoires. navigation set param here and wrap this in the use effect call of course, that would be
better to set our
title with set param and use it here in the navigation options that we have to add to products detail to extract
it or really a bit plus facile, nous allons à l'aperçu du produit qui est l'endroit où nous allons
à cette page et en plus de passer l'ID du produit, nous passons également le titre
du produit car ici nous l'avons facilement disponible et nous l'obtenons à l'aide
de itemData. article. Titre.
Maintenant, nous définissons également ce paramètre et cela le rend super facile à extraire dans
l'écran de détail du produit, là dans les options de navigation, nous pouvons simplement ajouter des options
de navigation à l'écran de détail du produit et c'est maintenant la forme fonctionnelle car nous devons extraire ceci
de manière dynamique à partir de nos paramètres d'itinéraire. Donc, ici, nous obtenons cet objet de données nav qui
a également un accessoire de navigation, nous devons retourner notre objet Javascript, notre objet de configuration des options de navigation ici, ce devrait être des
options bien sûr et là-dedans, nous pouvons définir le titre de l'en-tête sur navData. la navigation. le titre du produit getParam ou ce que vous
avez choisi comme identifiant pour cela.
Donc, ici, j'utilise le titre du produit, car dans l'écran de présentation du produit, je le configure sur le titre du produit.
Avec cela, nous définissons cet en-tête, voyons si cela fonctionne, si nous essayons d'aller à cet écran, ça
a l'air bien,
maintenant nous voyons également le titre du produit ici dans l'en-tête. Ça marche.
Maintenant, j'ai mentionné plus tôt que nous ne devrions pas seulement pouvoir y aller en appuyant sur
les détails de la vue, mais peut-être aussi
en appuyant sur le produit en général et pour cela, nous pouvons aller à l'article du produit et là, bien
sûr, nous avons le bouton voir les détails, mais maintenant, nous pouvons
bien sûr envelopper l'élément entier dans un toucher et là, nous pouvons utiliser l'opacité tactile et envelopper cet élément entier avec une opacité tactile, alors enroulez-le autour de notre vue entière ici, ces
boutons seront toujours déclenchés de manière autonome mais maintenant nous pouvons
également appuyer sur n'importe où ailleurs et là-bas sur la presse, je veux maintenant également déclencher
la même
chose, le bouton Afficher les détails le fait, je veux déclencher la fonction que nous recevons sur les détails de
la vue, je vais donc simplement transmettre cela à la vue détaillée. Et qu'avec ce simple changement, nous pouvons appuyer n'importe
où sur cet élément pour être amené à l'écran de détail, également sur Android où cela semble cependant
un peu moche et en général, ce serait bien d'avoir cet effet d'entraînement là-bas.
Maintenant, vous avez également appris comment mettre
en œuvre cela, nous devons importer des commentaires natifs touchables pour cela et l'API de la plate-forme, donc cet objet de
plate-forme et maintenant ici dans l'article de produit, nous pouvons configurer notre composant touchable ici ou tout ce que vous voulez le
nommer , devrait avoir un caractère majuscule pour que nous puissions l'utiliser comme élément jsx
et cela par défaut pointe
sur l'opacité tactile disons mais si la plate-forme OS est égale à Android et la version de la plate-forme est supérieure ou égale à 21
qui est la version Android nous devons prendre en
charge l'effet d'entraînement, nous pouvons définir un cmp tactile égal à la rétroaction native tactile et maintenant nous pouvons remplacer l'opacité tactile là-bas par
un
cmp tactile ainsi avec cette variable qui contient deux types
de composants différents selon l'endroit où il fonctionne et maintenant si nous Pour ce faire, nous
avons toujours cet effet d'opacité ici, mais nous avons un effet d'entraînement sur Android.
Mais seulement là-bas, pas sur l'image et ne respectant pas non plus nos coins arrondis comme vous pouvez peut-être
le voir.
Maintenant, pour résoudre le problème qui n'est
pas sur l'image, tout ce que nous avons à faire est
de changer une configuration là-bas, il nous suffit d'ajouter ici l'utilisation de l'accessoire de premier plan.
Maintenant, sur l'opacité tactile, cela n'aura aucun effet, mais sur la rétroaction native tactile, cela garantit
que l'effet d'entraînement ne s'applique pas à l'arrière-plan mais en fait au premier plan, ce
qui signifie également aux éléments qui sont placés au-dessus de notre toucher ou à l'intérieur de notre composant palpable.
Donc donc maintenant, c'est aussi sur l'image et pour respecter les coins, les coins arrondis, je vais
en fait faire un peu
différemment, j'ajouterai un composant palpable à l'intérieur de ma vue environnante au lieu de l'extérieur, comme ça
et maintenant ici, je vais ajouter un débordement caché sur ce style de produit qui se trouve sur cette vue
qui est maintenant autour de mon composant tactile. Avec cela cependant, mon ombre est perdue comme vous pouvez le
voir et ici, j'ai maintenant même une erreur selon laquelle j'ai besoin d'un seul enfant React. Par conséquent, ajustons un peu cela et ajoutons
une vue supplémentaire ici, une vue supplémentaire qui enveloppe tout, tout mon composant
tactile à l'intérieur de cette vue extérieure et sur cette vue supplémentaire, je vais ajouter un style de styles touchable ou autre
vous voulez le nommer et ce style tactile est maintenant ajouté ici dans ma feuille de style.
Cela obtient maintenant l'accessoire caché de
débordement, alors nous ajoutons ceci ici et cela reçoit également le même rayon de bordure que nous avons sur tout le
chariot, donc rayon de bordure de 10 ici et cela va maintenant nous assurer que nous gardons notre ombre, de sorte que toujours fonctionne parce
que le débordement caché aurait recadré cela et maintenant pour se débarrasser de cette autre erreur
ici aussi, nous pouvons simplement envelopper une autre vue autour de tout le contenu à l'intérieur du composant tactile
afin que nous remplissions ces critères d'avoir un seul élément enfant dans le composant tactile et maintenant avec
cela, nous avons le même comportement qu'avant sur iOS. Au fait, le panier ne déclenche pas cette
navigation de détails qui est bonne et sur Android, nous
avons maintenant aussi cet effet d'entraînement qui respecte nos coins arrondis qui nous amène à
la vue détaillée et le panier ne fait pas non plus ce qu'il ne devrait pas .
Donc, avec cela, nous avons maintenant la navigation dont nous avons besoin,
nous avons le look dont nous avons besoin ici.
Maintenant, nous pouvons aller à la page de détail et nous devrions peut-être maintenant nous assurer que cette page de détail ressemble également à ce qu'elle
devrait être.