如何在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中使用Components时，会有一个转换层将信息从JS传递到React Native桥，然后导致创建相应的本机组件

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

Expo的工作方式是他们包装了React Native和一些第三方组件，并在他们的应用程序中构建它。您不能使用他们不支持的第三方原生组件的原因是因为在使用该组件时，应用程序本身没有转换代码从JS转到本机Android / iOS视图。

所以，要做你要求的事情，你需要找到一个＆＃34; native＆＃34; Expo已包含在其平台/应用程序中的绘图组件。或者你需要找到一个＆＃34;复合材料＆＃34;使用其他默认React Native组件（或Expo支持的其他组件）构建的绘图组件。

即。在Android上，我可以使用Canvas视图构建它，但是我可以告诉React Native本身不支持该对象，所以我可能会自己写这个等等。

世博会很难支持每一个第三方＆＃34;本地人＆＃34;组件因为React Native是开源的，它迭代速度太快，以至于大多数社区构建的组件都不是最新的，或者它们可能彼此冲突。

Answer 2

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

等等，但是怎么样？

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

Answer 3

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