如何在 React Native 中进行签名捕获？

Question

我正在尝试了解如何在 React Native 中进行签名捕获。我的应用程序是使用 create-react-native-app 和 Expo 创建的，我不想退出应用程序来使此功能正常工作。

是否可以将这样的内容包装在 webview 中？ https://github.com/szimek/signature_pad

我也看过这个项目，https://github.com/RepairShopr/react-native-signature-capture，但它需要我退出应用程序并使用react-native link。

寻找有关如何实现此功能的任何建议或建议，同时使我的项目尽可能简单（理想情况下，使用 create-react-native-app，但如果这不可能，有人可以向我解释为什么吗？ )

Answer 1

React Native 的工作方式是 React Native 中可用的每个组件都映射到底层平台中的原生组件。

即。 <Image /> 在 Android 中是 ImageView，在 iOS 中是 UIImageView.h。

Javascript 代码本身在每个平台上的 Javascript 线程中运行，当您在 React Native 中使用组件时，有一个翻译层将信息从 JS 传递到 React Native 桥接器，然后导致相应的原生组件被创建。

默认情况下，React Native 包含以下组件：https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components，这意味着只有这些组件在 React Native 中是开箱即用的。如果您想要其他组件，那么您有 2 个选项，或者创建一个“复合”组件，在其中将您的 JS 组件写入其他 JS 组件，或者，如果您的功能需要 React Native 尚未公开的本机组件，请编写您自己的“ native" 组件以向您的 React Native 代码公开某些本机功能。

Expo 的工作方式是，他们封装了 React Native 和一些 3rd 方组件，并将其构建在他们的应用程序中。您不能使用他们不支持的 3rd 方原生组件的原因是，当使用该组件时，应用程序本身没有从 JS 到原生 Android/iOS 视图的翻译代码。

因此，要执行您的要求，您需要找到 Expo 已包含在其平台/应用程序中的“本机”绘图组件。或者你需要找到一个“复合”绘图组件，它是用其他默认的 React Native 组件（或 Expo 支持的其他组件）构建的。

即。在 Android 上，我可能会使用 Canvas 视图构建它，但据我所知，React Native 本身并不支持该对象，所以我可能会自己编写它，等等。

Expo 很难支持所有第 3 方“本地”组件，因为 React Native 是开源的，而且它的迭代速度非常快，以至于大多数社区构建的组件并不总是最新的，或者它们可能相互冲突。

Answer 2

我正在使用 react-native-signature-capture。 在 Android 和 iOS 上都能正常工作。

Answer 3

我知道已经有一段时间了，但这里有一篇有趣的文章：https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac

等等，但是怎么做？

使用“expo-pixi”，您可以添加一个组件，让您选择画笔的颜色、粗细和不透明度。然后，当您的用户抬起手指时，您会收到回调。从那里您可以截取透明视图的屏幕截图或获取原始点数据（如果您正在寻找）。