检测触摸是否是Apple Pencil或手指在webview中(做出本机反应)

Question

在safari mobile中,触摸可以分为Apple Pencil vs other(手指/鼠标),使用:

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

但是,在本机webview(Apple Pencil和使用手指)中收到的所有事件都会收到:

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

如何在Webview中检测Apple Pencil的触摸？

显然event.touches[0] > 0是另一种可能性,但这也0适用于webview中的两种类型.

(不确定这是反应原生的问题还是webviews的内置限制).

有关:

• UIView对Apple Pencil没有反应
• Javascript触摸事件:区分手指与Apple Pencil

Answer 1

我通过从https://github.com/CRAlpha/react-native-wkwebview用WKWebView组件替换React Native WebView组件解决了这个问题

即替换import { WebView } from 'react-native'为import WKWebView from 'react-native-wkwebview-reborn'

这需要各种修改和变通方法,但最终成功,现在事件包括额外的参数,例如:

• touchType
• 力
• altitudeAngle
• azimuthAngle

看起来较旧的WebView可能不支持与Pencil/Stylus相关的其他事件参数(但也可能是我使用了错误/旧版本,或者也许React Native不会从本机WebView组件传递这些参数.我会如果有人可以澄清,很高兴更新更详细).

Answer 2

如果你看看iOS 8发布日期

2014年9月17日

和Apple铅笔发布日期

2015年11月11日

和Apple的力量触发发布日期

2014年9月9日

现在,如果你看看苹果下面的文章

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

重要

从iOS 8.0和OS X 10.10开始,使用WKWebView将Web内容添加到您的应用程序.不要使用UIWebView或WebView.

因此,WKWebView相比之下,有可能更好地支持这些事情UIWebView.但是没有实验就无法确认,因为没有两种文件之间存在明显差异的文件

WKWebView关于iOS8 +默认使用反应原生的讨论很多.您可以在下面找到相同的内容

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

您可以从WKWebViewreact组件维护者处看到评论

本文反应本机wkwebview的维护者.我同意这个回购合并到核心的好处有限,其中一个是Expo支持(Expo仍然使用UIWebView).但我认为对于世博会来说这不是一个问题,而不是React Native.

IMO,React Native应该专注于"核心"桥梁,这个组件应该很乐意作为第三方组件.这使人们更容易实际参与这个项目.此外,它意味着灵活的发布时间表(与React Native的每月发布时间表相对)

我同意@brunolemos的观点,即改进React Native文档是一种更好的方法,可以让人们更多地了解有关UIWebView和WKWebView的决定并指出他们的解决方案.

所以我认为有可能WKWebView在事件中具有比弃用更多的功能UIWebView.但不幸的是,经过几个小时的挖掘,我找不到任何这样的官方信息.如果我有iPhone/iPad和我一起试验,我会添加一些额外的信息.

我试着用模拟器,我得到了以下字段事件都UIWebView和WKWebView

WKWebView

UIWebView的

我使用的JSFiddle

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

但由于我没有物理设备,我无法确认一些观察结果