ios - 在 webview 中检测触摸是 Apple Pencil 还是手指( react native )

Question

在 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

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

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

(不确定这是 React Native 的问题还是 WebView 的内置限制)。

相关:

• UIView do not react on Apple Pencil
• Javascript touch event: distinguishing finger vs. Apple Pencil

Answer 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 可能不会从 native WebView 组件传递这些参数。如果有人可以澄清，我很乐意更新更多细节。