1 00:00:02,220 --> 00:00:06,510 Assurons-nous que nous pouvons aller à l'écran de détail du produit, cet écran ici 2 00:00:06,510 --> 00:00:09,870 et pour cela tout d'abord dans le composant d'écran de détail 3 00:00:09,870 --> 00:00:13,170 du produit, eh bien je vais configurer un composant en important 4 00:00:13,170 --> 00:00:15,590 React depuis React. Puis là-dedans, nous 5 00:00:15,620 --> 00:00:21,150 avons probablement aussi besoin de certaines choses de React Native, par exemple cela ne peut pas 6 00:00:21,210 --> 00:00:26,940 vraiment faire de mal d'avoir une vue et un texte ici et aussi une feuille de style et 7 00:00:27,150 --> 00:00:32,880 aussi le composant image, par la façon dont l'ordre de ces importations ici bien sûr n'a pas d'importance. 8 00:00:32,890 --> 00:00:38,430 Je veux également avoir un bouton là-dedans parce que je veux avoir un bouton ajouter au panier ici 9 00:00:38,610 --> 00:00:47,250 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 10 00:00:47,250 --> 00:00:52,440 sur un très petit appareil et par conséquent, il doit certainement défiler afin que nous puissions 11 00:00:52,440 --> 00:00:55,950 toujours voir tout le contenu. Avec cela ici, je 12 00:00:55,950 --> 00:01:03,940 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 13 00:01:04,210 --> 00:01:10,420 feuille de style ici avec la feuille de style. créez-le et stockez-le dans une constante des styles 14 00:01:10,420 --> 00:01:17,440 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 15 00:01:17,500 --> 00:01:26,340 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 16 00:01:26,340 --> 00:01:29,570 pouvons réellement l'utiliser parce que nous devons retourner jsx à 17 00:01:29,610 --> 00:01:34,500 avoir un composant valide parce que la première chose que je veux faire est d'ajuster la 18 00:01:34,500 --> 00:01:39,750 navigation et pour cela dans le ShopNavigator. fichier js dans le dossier de navigation, nous 19 00:01:39,750 --> 00:01:42,290 pouvons importer l'écran de détail du produit 20 00:01:42,420 --> 00:01:51,020 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 21 00:01:51,020 --> 00:01:51,760 lequel 22 00:01:51,770 --> 00:01:58,750 nous venons de travailler bien sûr et mapper cela à un identifiant ici, je '' Je nommerai le détail 23 00:01:58,750 --> 00:01:59,830 du produit ici. 24 00:01:59,830 --> 00:02:03,640 Ces touches, comme vous l'avez appris dans la section de navigation, dépendent toujours de 25 00:02:03,640 --> 00:02:06,070 vous, alors nous avons maintenant mappé cet écran. 26 00:02:06,220 --> 00:02:09,570 Ce sera notre écran de démarrage car il s'agit de 27 00:02:09,580 --> 00:02:14,170 la première paire valeur-clé, c'est un écran auquel nous pouvons aller cependant, nous pouvons y naviguer 28 00:02:14,170 --> 00:02:20,440 et y aller, nous devons aller à notre écran de présentation des produits et lorsque nous cliquons sur la vue détail, c'est 29 00:02:20,440 --> 00:02:24,700 finalement le signal que nous voulons aller à cet écran de détail du produit. 30 00:02:24,700 --> 00:02:32,140 Donc ici, dans cette fonction, nous pouvons appeler la navigation des accessoires, cette fonction de navigation que vous avez apprise dans 31 00:02:32,140 --> 00:02:35,260 la section de navigation, puis là, je vous 32 00:02:35,320 --> 00:02:40,170 ai montré une syntaxe où vous passez dans un objet Javascript où vous 33 00:02:40,180 --> 00:02:46,340 définissez un nom de route, qui pourrait être le détail du produit et qui vous mènera à l'écran. 34 00:02:46,340 --> 00:02:47,920 Alors maintenant, nous enregistrons cela et nous 35 00:02:47,930 --> 00:02:55,430 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 36 00:02:55,430 --> 00:02:55,980 également 37 00:02:55,990 --> 00:03:02,270 montré bien sûr que la syntaxe alternative à cela est que vous passez simplement le nom d'écran comme premier argument 38 00:03:02,270 --> 00:03:03,970 pour naviguer, vous pouvez donc 39 00:03:03,980 --> 00:03:09,080 le faire aussi et cela fonctionnera comme bien. Si nous testons également cela sur 40 00:03:09,080 --> 00:03:11,750 Android, c'est ainsi que nous pouvons y aller. 41 00:03:11,940 --> 00:03:19,410 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 42 00:03:19,410 --> 00:03:25,200 charger les données du produit à l'intérieur du composant. Par conséquent, comme deuxième argument ici, je passe un objet Javascript 43 00:03:25,710 --> 00:03:30,380 qui sera mes paramètres pour cette action de navigation et là vous pouvez avoir toutes les paires 44 00:03:30,510 --> 00:03:36,060 clé-valeur que vous voulez, je vais ajouter un champ ID produit ici, encore une fois ce nom est totalement à vous 45 00:03:36,090 --> 00:03:42,120 cependant et ce sera itemData. article. id car itemData. l'article pointe vers un 46 00:03:42,120 --> 00:03:48,480 seul produit qui a l'apparence que nous avons configurée ici dans les modèles et qui a un accessoire ID, donc 47 00:03:48,480 --> 00:03:55,350 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 48 00:03:55,380 --> 00:04:01,410 cela bien sûr, c'est aussi quelque chose que vous avez appris plus tôt et que vous pouvez simplement pratiquer ici. 49 00:04:01,410 --> 00:04:11,880 Nous pouvons obtenir notre ID de produit ici en appelant simplement props navigation get get param ID de produit et cela extraira 50 00:04:11,880 --> 00:04:17,160 notre ID de produit des paramètres que nous avons reçus. 51 00:04:17,180 --> 00:04:22,580 Maintenant, nous pouvons utiliser cet ID pour obtenir notre produit et bien sûr, nos produits sont stockés dans Redux. 52 00:04:22,640 --> 00:04:29,510 Donc, à la fin, nous devons importer le sélecteur d'utilisation ici à partir de React Redux, afin que nous puissions l'utiliser pour 53 00:04:29,510 --> 00:04:30,830 sélectionner un seul 54 00:04:30,830 --> 00:04:37,220 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 55 00:04:37,220 --> 00:04:43,010 d'utilisation qui reçoit notre état, notre état Redux et ensuite nous pouvons percer dans la tranche de produits, encore 56 00:04:43,070 --> 00:04:51,420 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 57 00:04:51,470 --> 00:04:54,650 à tous les produits disponibles, mais de Bien sûr, ici, 58 00:04:54,680 --> 00:04:59,230 je ne veux pas charger tous les produits disponibles, mais à la place, je 59 00:04:59,240 --> 00:05:06,650 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 60 00:05:06,650 --> 00:05:12,560 tableau où nous obtenons le produit où cette fonction renvoie vrai et il devrait retourner vrai si l'ID du 61 00:05:12,560 --> 00:05:18,290 produit que je regarde est égal à l'ID de produit que j'ai extrait des paramètres de la route. 62 00:05:18,290 --> 00:05:23,470 C'est ainsi que nous sélectionnons un seul produit et ce produit unique peut ensuite être utilisé 63 00:05:23,470 --> 00:05:32,930 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 64 00:05:32,930 --> 00:05:33,860 effet ici je 65 00:05:33,860 --> 00:05:37,970 vois une chemise rouge, si je fais ça pour le tapis bleu, je vois du 66 00:05:37,970 --> 00:05:41,590 tapis bleu ici, alors ça marche. Ce serait bien de 67 00:05:41,720 --> 00:05:43,110 voir que dans 68 00:05:43,280 --> 00:05:53,810 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 69 00:05:53,810 --> 00:05:55,030 better to set our 70 00:05:55,030 --> 00:06:01,880 title with set param and use it here in the navigation options that we have to add to products detail to extract 71 00:06:01,880 --> 00:06:07,690 it or really a bit plus facile, nous allons à l'aperçu du produit qui est l'endroit où nous allons 72 00:06:07,700 --> 00:06:12,710 à cette page et en plus de passer l'ID du produit, nous passons également le titre 73 00:06:12,710 --> 00:06:17,000 du produit car ici nous l'avons facilement disponible et nous l'obtenons à l'aide 74 00:06:17,000 --> 00:06:20,120 de itemData. article. Titre. 75 00:06:20,150 --> 00:06:25,400 Maintenant, nous définissons également ce paramètre et cela le rend super facile à extraire dans 76 00:06:25,820 --> 00:06:31,490 l'écran de détail du produit, là dans les options de navigation, nous pouvons simplement ajouter des options 77 00:06:33,930 --> 00:06:40,440 de navigation à l'écran de détail du produit et c'est maintenant la forme fonctionnelle car nous devons extraire ceci 78 00:06:41,730 --> 00:06:48,390 de manière dynamique à partir de nos paramètres d'itinéraire. Donc, ici, nous obtenons cet objet de données nav qui 79 00:06:48,420 --> 00:06:55,590 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 80 00:06:55,620 --> 00:07:07,770 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 81 00:07:07,830 --> 00:07:11,170 avez choisi comme identifiant pour cela. 82 00:07:11,190 --> 00:07:17,060 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. 83 00:07:19,600 --> 00:07:25,600 Avec cela, nous définissons cet en-tête, voyons si cela fonctionne, si nous essayons d'aller à cet écran, ça 84 00:07:25,900 --> 00:07:27,130 a l'air bien, 85 00:07:27,130 --> 00:07:34,560 maintenant nous voyons également le titre du produit ici dans l'en-tête. Ça marche. 86 00:07:34,560 --> 00:07:39,420 Maintenant, j'ai mentionné plus tôt que nous ne devrions pas seulement pouvoir y aller en appuyant sur 87 00:07:39,420 --> 00:07:41,840 les détails de la vue, mais peut-être aussi 88 00:07:42,170 --> 00:07:47,930 en appuyant sur le produit en général et pour cela, nous pouvons aller à l'article du produit et là, bien 89 00:07:47,930 --> 00:07:51,310 sûr, nous avons le bouton voir les détails, mais maintenant, nous pouvons 90 00:07:51,440 --> 00:08:01,000 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 91 00:08:01,160 --> 00:08:04,430 boutons seront toujours déclenchés de manière autonome mais maintenant nous pouvons 92 00:08:04,430 --> 00:08:09,110 également appuyer sur n'importe où ailleurs et là-bas sur la presse, je veux maintenant également déclencher 93 00:08:09,130 --> 00:08:09,900 la même 94 00:08:09,920 --> 00:08:15,710 chose, le bouton Afficher les détails le fait, je veux déclencher la fonction que nous recevons sur les détails de 95 00:08:15,740 --> 00:08:22,730 la vue, je vais donc simplement transmettre cela à la vue détaillée. Et qu'avec ce simple changement, nous pouvons appuyer n'importe 96 00:08:22,730 --> 00:08:28,970 où sur cet élément pour être amené à l'écran de détail, également sur Android où cela semble cependant 97 00:08:28,970 --> 00:08:34,080 un peu moche et en général, ce serait bien d'avoir cet effet d'entraînement là-bas. 98 00:08:34,220 --> 00:08:36,980 Maintenant, vous avez également appris comment mettre 99 00:08:37,070 --> 00:08:44,760 en œuvre cela, nous devons importer des commentaires natifs touchables pour cela et l'API de la plate-forme, donc cet objet de 100 00:08:44,760 --> 00:08:52,980 plate-forme et maintenant ici dans l'article de produit, nous pouvons configurer notre composant touchable ici ou tout ce que vous voulez le 101 00:08:52,980 --> 00:08:58,650 nommer , devrait avoir un caractère majuscule pour que nous puissions l'utiliser comme élément jsx 102 00:08:58,660 --> 00:09:00,710 et cela par défaut pointe 103 00:09:00,720 --> 00:09:10,050 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 104 00:09:10,050 --> 00:09:13,240 qui est la version Android nous devons prendre en 105 00:09:13,440 --> 00:09:22,410 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 106 00:09:22,410 --> 00:09:23,100 un 107 00:09:24,210 --> 00:09:28,120 cmp tactile ainsi avec cette variable qui contient deux types 108 00:09:28,220 --> 00:09:34,040 de composants différents selon l'endroit où il fonctionne et maintenant si nous Pour ce faire, nous 109 00:09:34,850 --> 00:09:40,330 avons toujours cet effet d'opacité ici, mais nous avons un effet d'entraînement sur Android. 110 00:09:40,340 --> 00:09:48,980 Mais seulement là-bas, pas sur l'image et ne respectant pas non plus nos coins arrondis comme vous pouvez peut-être 111 00:09:48,980 --> 00:09:49,930 le voir. 112 00:09:50,390 --> 00:09:52,770 Maintenant, pour résoudre le problème qui n'est 113 00:09:52,850 --> 00:09:56,500 pas sur l'image, tout ce que nous avons à faire est 114 00:09:56,690 --> 00:10:01,990 de changer une configuration là-bas, il nous suffit d'ajouter ici l'utilisation de l'accessoire de premier plan. 115 00:10:02,050 --> 00:10:07,570 Maintenant, sur l'opacité tactile, cela n'aura aucun effet, mais sur la rétroaction native tactile, cela garantit 116 00:10:07,570 --> 00:10:12,850 que l'effet d'entraînement ne s'applique pas à l'arrière-plan mais en fait au premier plan, ce 117 00:10:12,910 --> 00:10:19,180 qui signifie également aux éléments qui sont placés au-dessus de notre toucher ou à l'intérieur de notre composant palpable. 118 00:10:19,180 --> 00:10:25,360 Donc donc maintenant, c'est aussi sur l'image et pour respecter les coins, les coins arrondis, je vais 119 00:10:25,360 --> 00:10:27,560 en fait faire un peu 120 00:10:27,670 --> 00:10:33,840 différemment, j'ajouterai un composant palpable à l'intérieur de ma vue environnante au lieu de l'extérieur, comme ça 121 00:10:35,550 --> 00:10:42,860 et maintenant ici, je vais ajouter un débordement caché sur ce style de produit qui se trouve sur cette vue 122 00:10:42,870 --> 00:10:48,260 qui est maintenant autour de mon composant tactile. Avec cela cependant, mon ombre est perdue comme vous pouvez le 123 00:10:48,260 --> 00:10:55,710 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 124 00:10:55,710 --> 00:11:01,590 une vue supplémentaire ici, une vue supplémentaire qui enveloppe tout, tout mon composant 125 00:11:01,590 --> 00:11:11,370 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 126 00:11:11,370 --> 00:11:19,090 vous voulez le nommer et ce style tactile est maintenant ajouté ici dans ma feuille de style. 127 00:11:19,180 --> 00:11:21,260 Cela obtient maintenant l'accessoire caché de 128 00:11:21,370 --> 00:11:28,090 débordement, alors nous ajoutons ceci ici et cela reçoit également le même rayon de bordure que nous avons sur tout le 129 00:11:28,090 --> 00:11:36,000 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 130 00:11:36,000 --> 00:11:41,220 que le débordement caché aurait recadré cela et maintenant pour se débarrasser de cette autre erreur 131 00:11:41,220 --> 00:11:47,230 ici aussi, nous pouvons simplement envelopper une autre vue autour de tout le contenu à l'intérieur du composant tactile 132 00:11:47,240 --> 00:11:52,890 afin que nous remplissions ces critères d'avoir un seul élément enfant dans le composant tactile et maintenant avec 133 00:11:52,890 --> 00:11:58,620 cela, nous avons le même comportement qu'avant sur iOS. Au fait, le panier ne déclenche pas cette 134 00:11:58,620 --> 00:12:01,940 navigation de détails qui est bonne et sur Android, nous 135 00:12:02,070 --> 00:12:06,780 avons maintenant aussi cet effet d'entraînement qui respecte nos coins arrondis qui nous amène à 136 00:12:07,050 --> 00:12:12,270 la vue détaillée et le panier ne fait pas non plus ce qu'il ne devrait pas . 137 00:12:12,270 --> 00:12:15,050 Donc, avec cela, nous avons maintenant la navigation dont nous avons besoin, 138 00:12:15,060 --> 00:12:17,210 nous avons le look dont nous avons besoin ici. 139 00:12:17,490 --> 00:12:23,490 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 140 00:12:23,490 --> 00:12:24,020 devrait être.