Nous pouvons donc ajouter nos éléments
ici, ce que nous ne pouvons pas faire, c'est les supprimer et c'est la prochaine étape que je
veux prendre, la prochaine chose que je veux mettre en œuvre ici.
Nous avons obtenu notre FlatList avec tous ces éléments d'objectif et ce serait bien si nous pouvions toucher un tel élément
d'objectif, donc un tel élément
de liste et lorsque nous le tapotons, nous le supprimons simplement de la liste.
Maintenant, la bonne chose est que nous pouvons identifier chaque article de manière unique, car chaque article ici a un ID, nous pouvons
donc utiliser cet ID pour lui et nous débarrasser de l'article, la
chose manquante est que nous pouvons le toucher. Maintenant, sur notre propre
composant, nous ne pouvons pas simplement ajouter onPress ou
quelque chose comme ça, cela ne fonctionnera pas, si le journal de la
console fonctionne ici, nous ne verrons
pas ce journal dès que j'appuierai sur l'élément.
Alors laissez-moi vous montrer cela, si vous laissez ce rechargement ici et ensuite nous apprenons à nouveau React Native et j'ajoute
cela et je tape plusieurs fois ici, je tape dessus, vous ne voyez pas la sortie ici et ça fait
sens, il s'agit d'un composant personnalisé et onPress serait désormais simplement un accessoire que nous transmettons à ce composant,
cet accessoire serait connecté à cette fonction, mais rien ne déclenche cet accessoire depuis l'intérieur du composant.
Nous devrons donc aller dans ce composant et nous assurer que cette vue peut être pressée.
Maintenant, en fait, une vue a divers accessoires qui nous aident à écouter les événements,
si vous tapez ici, votre IDE, si vous utilisez Visual Studio Code devrait vous donner une autocomplétion et
vous voyez qu'il y a beaucoup d'événements que vous
pouvez écouter, par exemple onTouchEnd nous aide réellement à écouter lorsque l'utilisateur touche fondamentalement à ceci et a fini
de le toucher.
Le problème avec cela est que onTouchEnd et quelques autres auditeurs que nous avons reçus ici sont à un niveau
trop bas.
Nous pouvons configurer des écouteurs très détaillés pour divers événements ici, mais par exemple onTouchEnd ne nous dit pas combien
de temps l'utilisateur a appuyé
dessus et si jamais vous avez besoin de savoir s'il s'agissait d'une pression longue ou courte, vous
devrez manuellement définissez une minuterie lorsque l'utilisateur commence à y toucher avec onTouchStart, attendez onTouchEnd puis décidez manuellement si
cela a été assez long ou non.
Ce n'est généralement pas ce que vous voulez faire, c'est bien sûr que vous avez
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
devrez faire tout le lourd soulever par vous-même, vous
devrez écrire beaucoup de code pour savoir de quel type de contact il s'agit par vous-même.
La bonne chose est que React Native vous a couvert.
Il y a un composant tactile intégré que vous pouvez importer et tactile est un composant que vous pouvez
envelopper autour de tout autre
composant que vous avez, donc autour de n'importe quelle vue ou de tout texte ou tout ce que vous avez et
il n'est pas visible, il ne rend rien que vous peut voir à l'écran, mais il enveloppera cela et
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
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
utilisé en tant que composant, il agit plutôt comme une classe parent pour React Native car il existe plusieurs versions
spécifiques du toucher que
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
maintenant vraiment un composant que
vous pouvez utiliser et maintenant ici, vous verrez que si vous tapez dessus, vous obtenez quelques événements tactiles de
haut niveau que vous pouvez écouter, comme onPress ou
onLongPress et c'est bien sûr beaucoup plus utile.
Maintenant, ici, je peux écouter onPress, ce qui signifie que c'est un événement de presse normal comme nous pourrions l'écouter sur
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
par exemple, nous pourrions le transmettre disons les accessoires. onDelete.
Donc, nous appelons une fonction qui a été passée dans ce composant sur l'accessoire onDelete, nous ne
définissons pas cet accessoire en ce moment, mais nous appelons maintenant quelque chose sur cet accessoire
et maintenant nous pouvons aller à l'endroit, dans l'application. js où nous utilisons l'élément d'objectif et ajoutons l'accessoire
onDelete au lieu de onPress et onDelete devrait maintenant pointer vers une fonction car nous attendons une fonction ici
dans notre élément d'objectif car onPress attend une fonction et nous transmettons simplement ce que onDelete pointe vers onPress.
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
tests, alors
voyons si j'apprends React Native et j'ajoute ceci et j'appuie ici plusieurs fois, vous voyez que j'obtiens ce feedback, ce
léger effet d'opacité ici en appuyant et si je le fais, vous voir cela ici
dans le journal, donc cela a fonctionné. Et vous voyez également l'effet de l'opacité tactile,
cela nous donne en fait un retour visuel sur notre toucher en changeant l'opacité de l'élément que nous
avons touché.
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
nombre, par exemple à. 8 et maintenant
ce sera beaucoup moins transparent par exemple si vous appuyez dessus.
Alors maintenant, si j'ai appris React Native ici et que j'appuie dessus, l'effet d'opacité est beaucoup
moins fort que vous pouvez le voir. Vous pouvez donc configurer cela selon vos besoins et avec cela, vous pouvez
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
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
comment cela se comporte et l'idée générale est la même avec la surbrillance tactile, vous
pouvez également écouter pour appuyer les événements, donc pour ces événements de haut niveau, ces événements préconfigurés mais le
retour visuel sera différent.
Ici, nous ne changerons pas l'opacité de l'élément enveloppé mais la couleur d'arrière-plan.
Alors maintenant, si j'apprends React Native et que je tape dessus, vous voyez
maintenant que la couleur d'arrière-plan devient noir et bien sûr, ici, dans ce cas, ce
n'est pas l'effet visuel que nous voulons. Maintenant, vous pouvez également configurer l'opacité active là-bas si
vous le souhaitez, vous pouvez configurer le délai supposé pour une pression longue, vous auriez pu le faire
également sur l'opacité tactile, vous pouvez donc configurer cet effet et vous pouvez simplement jouer avec avoir une idée de la
façon de l'utiliser.
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
savoir si cela fonctionne sur Android ou non, je vais vous montrer comment déterminer quelle plate-forme
vous utilisez plus tard, pour l'instant, utilisons-le et vous ne pourrez
pas le tester sur le simulateur iPhone mais ici sur Android, si j'ajoute maintenant ceci, vous verrez que
vous obtenez cet effet d'entraînement maintenant si vous testez ici et bien sûr,
vous pouvez également configurer cet effet ici avec des accessoires que vous pouvez définir et comme toujours, les documents officiels sont également
un excellent endroit où aller si vous voulez en savoir plus sur la façon de configurer cela,
donc
avoir cet effet d'entraînement peut soyez gentil sur Android aussi.
Et enfin et surtout, il est également possible de toucher sans rétroaction et cela fait ce que le
nom suggère, il vous permet d'enregistrer ces événements mais il ne donne aucun retour visuel parce que parfois vous voulez
juste avoir quelque chose que vous pouvez exploiter mais où vous en effet don ne veux pas donner de commentaires à l'utilisateur.
Donc ici, je peux appuyer autant que
je veux, le robinet est enregistré et donc je
vois la sortie ici mais nous n'obtenons aucun retour visuel. Donc, ces composants tactiles sont vraiment importants dans React Native
car ils vous permettent d'attacher les écouteurs tactiles de haut niveau normaux, comme onPress, onLongPress et ainsi de suite à n'importe quel
composant dans React Native et avec lequel vous pouvez créer vos propres composants tactiles, vos propres boutons , vos
propres liens, tout ce dont vous avez besoin.
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
et à jouer avec ces différents effets tactiles et à jouer avec les différentes configurations que
vous pouvez y appliquer, évidemment
nous '' Je les utiliserai intensivement tout au long de
ce cours, nous les verrons donc de nombreuses fois, mais c'est également un excellent endroit pour commencer avec
ces composants. Comme je l'ai
dit, j'irai avec une opacité tactile ici et maintenant la prochaine étape est de nous assurer que nous ne nous contentons pas de
connecter quelque chose à la console, mais que nous supprimons réellement l'élément sur lequel vous avez appuyé.