ios - pro - Detectar si el toque fue Apple Pencil o el dedo en webview(reaccionar de forma nativa)

apple pencil precio

Question

En safari mobile, los toques pueden clasificarse como Apple Pencil frente a otros (dedo / mouse) usando:

event.touches[0].touchType === ''stylus'' //pencil
event.touches[0].touchType !== ''stylus'' //other

Sin embargo, todos los eventos recibidos en una vista web nativa de reacción (tanto para Apple Pencil como para usar un dedo) reciben:

touchType === ''direct'' //inside webview, both pencil and other

¿Cómo puedo detectar un toque con el Apple Pencil dentro de una vista web?

Aparentemente, event.touches[0] > 0 es otra posibilidad, pero también se está configurando en 0 para ambos tipos en webview.

(No estoy seguro de si se trata de un problema con la reacción nativa o una limitación incorporada de las vistas web).

Relacionado:

• UIView no reacciona en Apple Pencil
• Evento táctil de JavaScript: dedo distintivo frente a lápiz de Apple

Answer 1

Resolví este problema al reemplazar el componente React Native WebView con el componente WKWebView de https://github.com/CRAlpha/react-native-wkwebview

es decir, reemplazar la import { WebView } from ''react-native'' con la import WKWebView from ''react-native-wkwebview-reborn''

Esto requirió varias modificaciones y soluciones alternativas, pero finalmente fue exitoso, y los eventos ahora incluyen parámetros adicionales como:

• tipo de contacto
• fuerza
• altitudAngle
• azimutalgar

Parece que la versión anterior de WebView puede no admitir los parámetros de eventos adicionales asociados con Pencil / Stylus (pero también es posible que esté usando una versión incorrecta / antigua o que React Native no los pase desde el componente nativo de WebView. Feliz de actualizar con más detalle si alguien puede aclarar).

Answer 2

Si nos fijamos en la fecha de lanzamiento iOS 8

17 de septiembre de 2014

Y fecha de lanzamiento del lápiz de Apple.

11 de noviembre de 2015

Y la fecha de lanzamiento de la fuerza de toque de Apple

9 de septiembre de 2014

Ahora si nos fijamos en el siguiente artículo de apple

https://developer.apple.com/documentation/webkit/wkwebview

Importante

A partir de iOS 8.0 y OS X 10.10, use WKWebView para agregar contenido web a su aplicación. No utilice UIWebView o WebView.

Por lo tanto, es posible que WKWebView tenga un mejor soporte para estas cosas en comparación con UIWebView . Pero no se puede confirmar sin experimentación ya que no hay documentación disponible con diferencias claras entre los dos.

Hubo una gran discusión sobre el uso de WKWebView por defecto en iOS8 + para reaccionar de forma nativa. Puedes encontrar lo mismo en la parte de abajo.

https://github.com/facebook/react-native/issues/321

Puedes ver el comentario del WKWebView componentes de reacción WKWebView

Mantenedor de reaccion-native-wkwebview aquí. Estoy de acuerdo en que hay beneficios limitados para que este repositorio se fusione con el núcleo, uno de ellos es el soporte de Expo (Expo todavía usa UIWebView). Pero creo que esto es más un problema para Expo, en lugar de React Native.

En mi opinión, React Native debería centrarse en los puentes "centrales" y este componente debería vivir felizmente como un componente de terceros. Esto facilita que las personas contribuyan realmente a este proyecto. Además, significa un calendario de lanzamiento flexible (a diferencia del calendario de lanzamiento mensual de React Native)

Y estoy de acuerdo con @brunolemos en que mejorar los documentos de React Native es una mejor manera de hacer que las personas tomen más conciencia de la decisión con respecto a UIWebView y WKWebView y señalarlas a la solución.

Así que creo que es posible que WKWebView tenga más capacidades en eventos que el UIWebView desuso. Pero desafortunadamente, después de horas de excavación no pude encontrar ninguna información oficial. Habría agregado algo de información adicional si tuviera un iPhone / iPad conmigo para experimentar.

UIWebView con el simulador y obtengo los siguientes campos en eventos tanto para UIWebView como para WKWebView

WKWebView

UIWebView

El JSFiddle que utilicé

https://jsfiddle.net/J4djY/166/

Pero como no tengo un dispositivo físico, no puedo confirmar algunas de las observaciones.