5

我试图了解如何在 React Native 中进行签名捕获。我的应用程序是使用创建的create-react-native-appExpo并且我希望不必弹出应用程序来使此功能正常工作。

是否有可能在 webview 中包装这样的东西?https://github.com/szimek/signature_pad

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

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

4

3 回答 3

3

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

IE。a在 Android中<Image />是a ,在 iOS 中是 a 。ImageViewUIImageView.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 中的 -box。如果您想要其他组件,那么您有 2 个选项,或者创建一个“复合”组件,在其中将您的 JS 组件写入其他 JS 组件,或者,如果您的功能需要 React Native 尚未公开的本机组件,请编写您自己的“ native" 组件,用于向您的 React Native 代码公开某些本机功能。

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

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

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

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

于 2018-03-21T17:17:41.517 回答
2

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

在此处输入图像描述

于 2019-06-26T13:36:05.610 回答
1

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

等等,但是怎么做?

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

于 2018-05-31T07:37:42.590 回答