1 00:00:02,330 --> 00:00:03,970 Nous pouvons donc ajouter nos éléments 2 00:00:03,970 --> 00:00:08,150 ici, ce que nous ne pouvons pas faire, c'est les supprimer et c'est la prochaine étape que je 3 00:00:08,190 --> 00:00:10,880 veux prendre, la prochaine chose que je veux mettre en œuvre ici. 4 00:00:10,960 --> 00:00:16,420 Nous avons obtenu notre FlatList avec tous ces éléments d'objectif et ce serait bien si nous pouvions toucher un tel élément 5 00:00:16,450 --> 00:00:18,010 d'objectif, donc un tel élément 6 00:00:18,130 --> 00:00:21,960 de liste et lorsque nous le tapotons, nous le supprimons simplement de la liste. 7 00:00:21,970 --> 00:00:27,550 Maintenant, la bonne chose est que nous pouvons identifier chaque article de manière unique, car chaque article ici a un ID, nous pouvons 8 00:00:27,550 --> 00:00:30,590 donc utiliser cet ID pour lui et nous débarrasser de l'article, la 9 00:00:30,760 --> 00:00:35,240 chose manquante est que nous pouvons le toucher. Maintenant, sur notre propre 10 00:00:35,260 --> 00:00:38,730 composant, nous ne pouvons pas simplement ajouter onPress ou 11 00:00:38,740 --> 00:00:44,040 quelque chose comme ça, cela ne fonctionnera pas, si le journal de la 12 00:00:44,050 --> 00:00:46,300 console fonctionne ici, nous ne verrons 13 00:00:46,300 --> 00:00:49,570 pas ce journal dès que j'appuierai sur l'élément. 14 00:00:49,570 --> 00:00:55,990 Alors laissez-moi vous montrer cela, si vous laissez ce rechargement ici et ensuite nous apprenons à nouveau React Native et j'ajoute 15 00:00:55,990 --> 00:01:02,050 cela et je tape plusieurs fois ici, je tape dessus, vous ne voyez pas la sortie ici et ça fait 16 00:01:02,050 --> 00:01:07,990 sens, il s'agit d'un composant personnalisé et onPress serait désormais simplement un accessoire que nous transmettons à ce composant, 17 00:01:07,990 --> 00:01:13,420 cet accessoire serait connecté à cette fonction, mais rien ne déclenche cet accessoire depuis l'intérieur du composant. 18 00:01:14,020 --> 00:01:18,850 Nous devrons donc aller dans ce composant et nous assurer que cette vue peut être pressée. 19 00:01:19,030 --> 00:01:24,200 Maintenant, en fait, une vue a divers accessoires qui nous aident à écouter les événements, 20 00:01:24,280 --> 00:01:30,190 si vous tapez ici, votre IDE, si vous utilisez Visual Studio Code devrait vous donner une autocomplétion et 21 00:01:30,570 --> 00:01:33,830 vous voyez qu'il y a beaucoup d'événements que vous 22 00:01:33,940 --> 00:01:40,150 pouvez écouter, par exemple onTouchEnd nous aide réellement à écouter lorsque l'utilisateur touche fondamentalement à ceci et a fini 23 00:01:40,180 --> 00:01:41,450 de le toucher. 24 00:01:41,620 --> 00:01:48,340 Le problème avec cela est que onTouchEnd et quelques autres auditeurs que nous avons reçus ici sont à un niveau 25 00:01:48,430 --> 00:01:49,300 trop bas. 26 00:01:49,480 --> 00:01:56,020 Nous pouvons configurer des écouteurs très détaillés pour divers événements ici, mais par exemple onTouchEnd ne nous dit pas combien 27 00:01:56,020 --> 00:01:57,960 de temps l'utilisateur a appuyé 28 00:01:58,090 --> 00:02:03,640 dessus et si jamais vous avez besoin de savoir s'il s'agissait d'une pression longue ou courte, vous 29 00:02:03,640 --> 00:02:10,090 devrez manuellement définissez une minuterie lorsque l'utilisateur commence à y toucher avec onTouchStart, attendez onTouchEnd puis décidez manuellement si 30 00:02:10,090 --> 00:02:12,480 cela a été assez long ou non. 31 00:02:12,610 --> 00:02:16,870 Ce n'est généralement pas ce que vous voulez faire, c'est bien sûr que vous avez 32 00:02:16,870 --> 00:02:24,100 toute la flexibilité de le faire, mais si vous voulez ces événements tactiles standard comme une pression longue, eh bien ce n'est pas idéal car vous 33 00:02:24,100 --> 00:02:26,770 devrez faire tout le lourd soulever par vous-même, vous 34 00:02:26,770 --> 00:02:31,390 devrez écrire beaucoup de code pour savoir de quel type de contact il s'agit par vous-même. 35 00:02:31,390 --> 00:02:34,200 La bonne chose est que React Native vous a couvert. 36 00:02:34,240 --> 00:02:40,660 Il y a un composant tactile intégré que vous pouvez importer et tactile est un composant que vous pouvez 37 00:02:40,660 --> 00:02:42,670 envelopper autour de tout autre 38 00:02:42,760 --> 00:02:49,660 composant que vous avez, donc autour de n'importe quelle vue ou de tout texte ou tout ce que vous avez et 39 00:02:49,660 --> 00:02:56,200 il n'est pas visible, il ne rend rien que vous peut voir à l'écran, mais il enveloppera cela et 40 00:02:56,200 --> 00:03:03,190 enregistrera l'événement tactile sur l'enfant que vous enveloppez et toucher, puis vous donne un événement tactile terminé, donc des événements tactiles 41 00:03:03,190 --> 00:03:09,070 plus détaillés qui ont été pré-configurés pour vous. Maintenant, pour être exact, le toucher comme celui-ci ne peut pas être 42 00:03:09,070 --> 00:03:13,900 utilisé en tant que composant, il agit plutôt comme une classe parent pour React Native car il existe plusieurs versions 43 00:03:13,900 --> 00:03:15,040 spécifiques du toucher que 44 00:03:15,160 --> 00:03:21,730 vous devriez alors réellement utiliser, par exemple, il y a l'opacité du toucher. Utilisons l'opacité tactile au lieu de toucher car c'est 45 00:03:21,730 --> 00:03:23,980 maintenant vraiment un composant que 46 00:03:23,980 --> 00:03:30,760 vous pouvez utiliser et maintenant ici, vous verrez que si vous tapez dessus, vous obtenez quelques événements tactiles de 47 00:03:30,760 --> 00:03:34,140 haut niveau que vous pouvez écouter, comme onPress ou 48 00:03:34,210 --> 00:03:37,120 onLongPress et c'est bien sûr beaucoup plus utile. 49 00:03:37,120 --> 00:03:42,910 Maintenant, ici, je peux écouter onPress, ce qui signifie que c'est un événement de presse normal comme nous pourrions l'écouter sur 50 00:03:42,910 --> 00:03:49,290 le bouton et lorsque cela est déclenché, ce que nous pouvons faire, bien sûr, nous pouvons exécuter le code que nous voulons et 51 00:03:49,360 --> 00:03:54,520 par exemple, nous pourrions le transmettre disons les accessoires. onDelete. 52 00:03:54,520 --> 00:04:00,400 Donc, nous appelons une fonction qui a été passée dans ce composant sur l'accessoire onDelete, nous ne 53 00:04:00,410 --> 00:04:05,980 définissons pas cet accessoire en ce moment, mais nous appelons maintenant quelque chose sur cet accessoire 54 00:04:05,980 --> 00:04:12,610 et maintenant nous pouvons aller à l'endroit, dans l'application. js où nous utilisons l'élément d'objectif et ajoutons l'accessoire 55 00:04:12,610 --> 00:04:18,820 onDelete au lieu de onPress et onDelete devrait maintenant pointer vers une fonction car nous attendons une fonction ici 56 00:04:18,820 --> 00:04:25,030 dans notre élément d'objectif car onPress attend une fonction et nous transmettons simplement ce que onDelete pointe vers onPress. 57 00:04:25,840 --> 00:04:32,750 OnDelete doit donc pointer sur une fonction et ce n'est que la fonction qui imprime qui fonctionne. Néanmoins, c'est au moins bon pour les 58 00:04:32,980 --> 00:04:34,480 tests, alors 59 00:04:34,480 --> 00:04:43,310 voyons si j'apprends React Native et j'ajoute ceci et j'appuie ici plusieurs fois, vous voyez que j'obtiens ce feedback, ce 60 00:04:43,310 --> 00:04:49,940 léger effet d'opacité ici en appuyant et si je le fais, vous voir cela ici 61 00:04:49,940 --> 00:04:56,070 dans le journal, donc cela a fonctionné. Et vous voyez également l'effet de l'opacité tactile, 62 00:04:56,110 --> 00:05:02,560 cela nous donne en fait un retour visuel sur notre toucher en changeant l'opacité de l'élément que nous 63 00:05:02,560 --> 00:05:03,600 avons touché. 64 00:05:03,610 --> 00:05:10,930 Vous pouvez également contrôler cette opacité en définissant le support d'opacité actif ici, sur l'opacité tactile et en le définissant sur un 65 00:05:10,930 --> 00:05:13,620 nombre, par exemple à. 8 et maintenant 66 00:05:13,750 --> 00:05:18,120 ce sera beaucoup moins transparent par exemple si vous appuyez dessus. 67 00:05:18,130 --> 00:05:23,980 Alors maintenant, si j'ai appris React Native ici et que j'appuie dessus, l'effet d'opacité est beaucoup 68 00:05:23,980 --> 00:05:29,860 moins fort que vous pouvez le voir. Vous pouvez donc configurer cela selon vos besoins et avec cela, vous pouvez 69 00:05:29,860 --> 00:05:35,980 non seulement ajouter un bel effet mais bien sûr aussi écouter l'effet de presse. Maintenant, l'opacité tactile n'est pas le seul composant que 70 00:05:35,980 --> 00:05:43,720 vous pouvez utiliser, en plus de l'opacité tactile, vous avez également une surbrillance tactile, alors utilisons plutôt la surbrillance tactile maintenant pour voir 71 00:05:43,750 --> 00:05:48,850 comment cela se comporte et l'idée générale est la même avec la surbrillance tactile, vous 72 00:05:48,880 --> 00:05:55,570 pouvez également écouter pour appuyer les événements, donc pour ces événements de haut niveau, ces événements préconfigurés mais le 73 00:05:55,570 --> 00:05:57,370 retour visuel sera différent. 74 00:05:57,460 --> 00:06:01,980 Ici, nous ne changerons pas l'opacité de l'élément enveloppé mais la couleur d'arrière-plan. 75 00:06:02,020 --> 00:06:06,520 Alors maintenant, si j'apprends React Native et que je tape dessus, vous voyez 76 00:06:06,520 --> 00:06:11,830 maintenant que la couleur d'arrière-plan devient noir et bien sûr, ici, dans ce cas, ce 77 00:06:11,830 --> 00:06:17,260 n'est pas l'effet visuel que nous voulons. Maintenant, vous pouvez également configurer l'opacité active là-bas si 78 00:06:17,260 --> 00:06:22,660 vous le souhaitez, vous pouvez configurer le délai supposé pour une pression longue, vous auriez pu le faire 79 00:06:22,660 --> 00:06:29,080 également sur l'opacité tactile, vous pouvez donc configurer cet effet et vous pouvez simplement jouer avec avoir une idée de la 80 00:06:29,080 --> 00:06:30,360 façon de l'utiliser. 81 00:06:30,700 --> 00:06:40,240 Outre l'opacité tactile et la mise en évidence tactile, vous avez également des commentaires natifs tactiles et cela ne fonctionne que sur Android et pour l'instant, vous ne savez pas comment 82 00:06:40,240 --> 00:06:45,150 savoir si cela fonctionne sur Android ou non, je vais vous montrer comment déterminer quelle plate-forme 83 00:06:45,190 --> 00:06:48,550 vous utilisez plus tard, pour l'instant, utilisons-le et vous ne pourrez 84 00:06:48,550 --> 00:06:53,980 pas le tester sur le simulateur iPhone mais ici sur Android, si j'ajoute maintenant ceci, vous verrez que 85 00:06:53,980 --> 00:06:58,140 vous obtenez cet effet d'entraînement maintenant si vous testez ici et bien sûr, 86 00:06:58,140 --> 00:07:04,930 vous pouvez également configurer cet effet ici avec des accessoires que vous pouvez définir et comme toujours, les documents officiels sont également 87 00:07:05,090 --> 00:07:10,400 un excellent endroit où aller si vous voulez en savoir plus sur la façon de configurer cela, 88 00:07:10,400 --> 00:07:11,080 donc 89 00:07:11,090 --> 00:07:14,360 avoir cet effet d'entraînement peut soyez gentil sur Android aussi. 90 00:07:14,420 --> 00:07:19,940 Et enfin et surtout, il est également possible de toucher sans rétroaction et cela fait ce que le 91 00:07:20,000 --> 00:07:25,700 nom suggère, il vous permet d'enregistrer ces événements mais il ne donne aucun retour visuel parce que parfois vous voulez 92 00:07:25,700 --> 00:07:31,970 juste avoir quelque chose que vous pouvez exploiter mais où vous en effet don ne veux pas donner de commentaires à l'utilisateur. 93 00:07:32,240 --> 00:07:34,740 Donc ici, je peux appuyer autant que 94 00:07:34,820 --> 00:07:37,760 je veux, le robinet est enregistré et donc je 95 00:07:37,760 --> 00:07:44,210 vois la sortie ici mais nous n'obtenons aucun retour visuel. Donc, ces composants tactiles sont vraiment importants dans React Native 96 00:07:44,240 --> 00:07:51,140 car ils vous permettent d'attacher les écouteurs tactiles de haut niveau normaux, comme onPress, onLongPress et ainsi de suite à n'importe quel 97 00:07:51,230 --> 00:07:57,080 composant dans React Native et avec lequel vous pouvez créer vos propres composants tactiles, vos propres boutons , vos 98 00:07:57,080 --> 00:07:59,980 propres liens, tout ce dont vous avez besoin. 99 00:07:59,980 --> 00:08:08,800 Maintenant, ici, je vais revenir à l'opacité tactile parce que j'aime cet effet d'opacité mais vraiment, n'hésitez pas à mettre la vidéo en pause ici 100 00:08:08,800 --> 00:08:14,410 et à jouer avec ces différents effets tactiles et à jouer avec les différentes configurations que 101 00:08:14,410 --> 00:08:16,490 vous pouvez y appliquer, évidemment 102 00:08:16,570 --> 00:08:19,990 nous '' Je les utiliserai intensivement tout au long de 103 00:08:19,990 --> 00:08:26,020 ce cours, nous les verrons donc de nombreuses fois, mais c'est également un excellent endroit pour commencer avec 104 00:08:26,140 --> 00:08:27,940 ces composants. Comme je l'ai 105 00:08:27,940 --> 00:08:33,040 dit, j'irai avec une opacité tactile ici et maintenant la prochaine étape est de nous assurer que nous ne nous contentons pas de 106 00:08:33,040 --> 00:08:36,700 connecter quelque chose à la console, mais que nous supprimons réellement l'élément sur lequel vous avez appuyé.