Détecter si le toucher était un crayon ou un doigt dans webview (react native))
dans safari mobile, les touches peuvent être classées comme Crayon Pomme vs autre (doigt / souris) en utilisant:
event.touches[0].touchType === 'stylus' //pencil
event.touches[0].touchType !== 'stylus' //other
cependant tous les événements reçus dans un WebView natif react (à la fois pour Apple Pencil et en utilisant un doigt) reçoivent:
touchType === 'direct' //inside webview, both pencil and other
Comment puis-je détecter un contact avec le crayon Apple dans un webview?
Apparemment event.touches[0] > 0 est une autre possibilité, mais c'est aussi 0 pour les deux types dans webview.
(pas sûr s'il s'agit d'un problème avec react native ou une limitation intégrée de webviews).
Related:
2 réponses
j'ai résolu ce problème en remplaçant le composant WebView natif React par le composant WKWebView à partir de https://github.com/CRAlpha/react-native-wkwebview
, C'est-à-dire remplacer import { WebView } from 'react-native' par import WKWebView from 'react-native-wkwebview-reborn'
cela a nécessité diverses modifications et solutions de rechange, mais a finalement été couronné de succès, et les événements comprennent maintenant les paramètres supplémentaires tels que:
- touchType
- force
- altitudeAngle
- azimuthAngle
il semble que L'ancien WebView ne supporte peut-être pas les paramètres d'événement supplémentaires associés à Pencil/Stylus (mais il est aussi possible que j'utilisais une version erronée/ancienne ou peut-être que le natif de React ne les transmette pas depuis le composant natif de WebView. Je serais heureux de mettre à jour avec plus de détails si quelqu'un peut préciser).
si vous regardez iOS 8 date de sortie
17 septembre 2014
Et Apple crayon release date
11 novembre 2015
et la date de sortie de Force touch D'Apple
9 septembre 2014
maintenant si vous regardez l'article ci-dessous d'apple
https://developer.apple.com/documentation/webkit/wkwebview
Important
à partir de iOS 8.0 et OS X 10.10, utilisez WKWebView pour ajouter du contenu web à votre application. N'utilisez pas UIWebView ou WebView.
il est donc possible que le WKWebView ait un meilleur support pour ces choses par rapport à UIWebView . Mais on ne peut pas le confirmer sans expérimentation car aucune documentation avec des différences claires entre les deux n'est disponible
il y a eu une énorme discussion sur l'utilisation de WKWebView par défaut sur iOS8+ pour react native. Vous pouvez trouver la même sur ci-dessous
https://github.com/facebook/react-native/issues/321
Vous pouvez voir les commentaires de WKWebView réagir composant responsable
mainteneur de ici react-native-wkwebview. Je suis d'accord qu'il y a des avantages limités pour que ce repo soit fusionné dans core, l'un d'eux étant le soutien D'Expo (Expo utilise encore UIWebView). Mais je pense que C'est plus un problème pour Expo, plutôt que de réagir natif.
IMO, React Native devrait se concentrer sur les ponts" de base " et cette composante devrait vivre avec bonheur comme une composante de tierce partie. Cela permet aux gens de contribuer plus facilement à ce projet. De plus, cela signifie une libération flexible horaire (par opposition au calendrier de diffusion mensuel de React Native)
et je suis d'accord avec @brunolemos que l'amélioration de React Native docs est un meilleur moyen de sensibiliser les gens à la décision concernant UIWebView et WKWebView et de les orienter vers la solution.
donc je pense qu'il est possible que WKWebView ait plus de capacités dans les événements que le UIWebView déprécié . Mais malheureusement, après des heures à creuser Je n'ai pas pu trouvez une telle information officielle. J'aurais ajouté des informations supplémentaires si j'avais eu l'iPhone/iPad avec moi pour expérimenter.
j'ai essayé avec simulateur et j'obtiens les champs ci-dessous dans les événements pour UIWebView et WKWebView
WKWebView
UIWebView
Le JSFiddle, j'ai utilisé
https://jsfiddle.net/J4djY/166 /
mais comme je n'ai pas de dispositif physique, Je ne peux pas confirmer certaines des observations