在 webview 中检测触摸是 Apple Pencil 还是手指（反应原生）答案

【问题标题】：Detect whether touch was Apple Pencil or finger in webview (react native)在 webview 中检测触摸是 Apple Pencil 还是手指（反应原生）
【发布时间】：2018-08-14 23:20:48
【问题描述】：

在 safari mobile 中，触摸可以分为 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

如何在 web 视图中检测 Apple Pencil 的触摸？

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

（不确定这是 react native 的问题还是 webview 的内置限制）。

相关：

【问题讨论】：

您是否尝试过在 webview 之上分层透明视图，并在那里对其进行测试，然后在 webview 的同一位置执行命中测试？
@ɯɐɹʞ 谢谢，如果我无法直接解决它，这听起来像是一个很好的解决方法。
你找到方法了吗？
还没有。如果很快没有任何事情发生，我怀疑我需要深入研究 React Native 核心并尝试做出贡献！ :-)
你能检查一下当你创建一个嵌入了 WebView 的原生应用程序时会发生什么吗？因为我检查了 ReactNative 代码，它并没有做任何事情来真正隐藏那个事件。所以你应该检查你是否确实在嵌入式 WebView 中获得了这些事件，而不管使用 React native

标签： ios react-native webview

【解决方案1】：

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

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

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

触摸类型
强制
高度角
方位角

似乎较旧的 WebView 可能不支持与 Pencil/Stylus 相关的附加事件参数（但也有可能我使用了错误/旧版本，或者 React Native 没有从本机 WebView 组件传递这些参数。如果有人能澄清，我很乐意更新更多细节）。

【讨论】：

【解决方案2】：

如果你看iOS 8发布日期

2014 年 9 月 17 日

Apple Pencil 的发布日期

2015 年 11 月 11 日

还有苹果的force touch发布日期

2014 年 9 月 9 日

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

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

重要

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

因此，与UIWebView 相比，WKWebView 可能对这些东西有更好的支持。但如果没有实验就无法确认，因为没有提供两者之间明显差异的文档

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

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

可以看到WKWebViewreact 组件维护者的评论

这里是 react-native-wkwebview 的维护者。我同意将这个 repo 合并到核心中的好处是有限的，其中之一是对 Expo 的支持（Expo 仍然使用 UIWebView）。但我认为这对于 Expo 来说更像是一个问题，而不是 React Native。

IMO，React Native 应该专注于“核心”桥梁，这个组件应该很高兴地作为 3rd 方组件存在。这使人们更容易真正为这个项目做出贡献。此外，这意味着灵活的发布计划（相对于 React Native 的每月发布计划）

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

所以我认为WKWebView 可能比已弃用的UIWebView 具有更多的事件功能。但不幸的是，经过数小时的挖掘，我找不到任何这样的官方信息。如果我有 iPhone/iPad 来做实验，我会添加一些额外的信息。

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

WKWebView

UIWebView

我使用的 JSFiddle

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

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

【讨论】：