在Webview中检测触摸是Apple Pencil还是手指（React Native）

Question

在 Safari 移动端，可以使用以下方式将触摸分类为 Apple Pencil 与其他（手指/鼠标）：

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

然而，使用React Native Webview接收的所有事件（无论是使用Apple Pencil还是手指）都会被接收：

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

如何在Webview中检测使用Apple Pencil的触摸事件？

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

（不确定这是否是React Native的问题还是Webview的内置限制）。

相关链接：

• UIView无法对Apple Pencil做出反应
• JavaScript触摸事件：区分手指和Apple Pencil

- pythonjsgeo

---

你尝试过在WebView上叠加一个透明视图并在那里进行测试，然后在WebView的相同位置执行一次HitTest吗？ - ɯɐɹʞ

@ɯɐɹʞ 谢谢，如果我无法直接解决它，这听起来像一个不错的解决方法。 - pythonjsgeo

你找到方法了吗？ - ɯɐɹʞ

还没有。如果很快没有任何进展，我怀疑我需要深入研究React Native核心并尝试做出贡献！ :-) - pythonjsgeo

你能否检查一下创建一个嵌入了 WebView 的本地应用程序会发生什么？因为我检查了 ReactNative 代码，它并没有做任何事情来实际隐藏该事件。所以你应该检查一下，在使用 React Native 的情况下，是否会在嵌入的 WebView 中收到这些事件。 - Tarun Lalwani

Answer 1

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

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

这需要进行各种修改和解决方法，但最终成功了，并且事件现在包括额外的参数：

• touchType
• force
• altitudeAngle
• azimuthAngle

似乎旧版WebView可能不支持与Pencil/Stylus相关的附加事件参数(但也有可能我使用的是错误/旧版本，或者React Native没有通过本机WebView组件将它们传递出去。如果有人能澄清，我会很高兴提供更多详细信息)。

- pythonjsgeo

Answer 2

如果您查看iOS 8的发布日期

2014年9月17日

以及Apple Pencil的发布日期

2015年11月11日

还有Apple的force touch发布日期

2014年9月9日

现在，如果您查看下面的苹果文章

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

重要提示：从iOS 8.0和OS X 10.10开始，请使用WKWebView来添加网页内容到您的应用程序中。不要使用UIWebView或WebView。

因此，WKWebView可能比UIWebView更好地支持这些功能。但是，在没有明确区分两者的文档的情况下，无法确认。

有关在iOS8+上默认使用WKWebView的react native的大量讨论。您可以在以下位置找到相同的讨论：

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

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

这里是 react-native-wkwebview 的维护者。我同意这个仓库被合并到核心中的好处有限，其中之一就是 Expo 支持（Expo 仍在使用 UIWebView）。但我认为这更多的是 Expo 的问题，而不是 React Native 的问题。

在我看来，React Native 应该专注于“核心”桥接，而这个组件应该愉快地作为第三方组件存在。这使得人们更容易为这个项目做出贡献。此外，这意味着灵活的发行安排（相对于 React Native 的每月发布时间表）

我同意 @brunolemos 的观点，改进 React Native 文档是让人们更加了解关于 UIWebView 和 WKWebView 决策的更好方式，并指向解决方案。

因此，我认为 WKWebView 在事件方面可能比淘汰的 UIWebView 具有更多的功能。但不幸的是，经过几个小时的挖掘，我找不到任何官方信息。如果我有 iPhone/iPad 进行实验，我会添加一些额外的信息。

我尝试使用模拟器，我得到了以下的事件字段，分别针对 UIWebView 和 WKWebView

WKWebView

UIWebView

我使用的 JSFiddle

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

但是由于我没有实体设备，无法确认一些观察结果

- Tarun Lalwani