Question

在safari mobile中，使用以下内容将触摸分类为Apple Pencil与其他（手指/鼠标）：

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

然而，在本地webview视图（Apple Pencil和使用手指）中收到的所有事件都在接收：

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

如何在网页浏览中检测到Apple Pencil的触摸？

显然event.touches[0] > 0是另一种可能性，但对于webview中的两种类型，这也被设置为0。

（不确定这是反应原生的问题还是webview的内置限制）。

相关：

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可能更好地支持这些事情。但是没有实验就无法确认，因为没有明显不同的文档可用

关于在iOS8 +上默认使用WKWebView进行反应原生的讨论很多。你可以在下面找到相同的

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

您可以看到来自WKWebView反应组件维护者的评论

本文反应原生wkwebview的维护者。我同意这个回购合并到核心的好处有限，其中一个是Expo支持（Expo仍然使用UIWebView）。但我认为这对世博会来说更像是一个问题，而不是React Native。

IMO，React Native应该专注于＆＃34;核心＆＃34;桥和这个组件应该很乐意作为第三方组件。这使人们更容易实际参与这个项目。此外，它意味着灵活的发布时间表（与React Native的每月发布时间表相反）

我同意@brunolemos的观点，即改进React Native文档是让人们更多地了解有关UIWebView和WKWebView的决定并将其指向解决方案的更好方法。

所以我认为WKWebView在事件中的功能可能比弃用UIWebView更多。但遗憾的是，经过几个小时的挖掘，我无法找到任何此类官方信息。如果我有iPhone / iPad和我一起试验，我会添加一些额外的信息。

我尝试使用模拟器，我在UIWebView和WKWebView的事件中获得以下字段

<强> WKWebView

<强>的UIWebView

我使用的JSFiddle

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

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

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

2 个答案: