如何在 React Native 中进行签名捕获?
How can I do Signature Capture in React Native?
我正在尝试了解如何在 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,但如果这不可能,请有人向我解释为什么?)
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 中 out-of-the-box。如果你想要其他组件,那么你有 2 个选择,要么创建一个 "composite" 组件,在该组件中你的 JS 组件被写入其他 JS 组件,或者,如果你的功能需要一个尚未被 React Native 公开的本地组件,写你的拥有 "native" 组件以向您的 React Native 代码公开某些本机功能。
Expo 的工作方式是他们包装了 React Native 和一些第 3 方组件,并将其构建在他们的应用程序中。您不能使用他们不支持的第 3 方本机组件的原因是因为当使用该组件时,应用程序本身没有从 JS 到本机 Android/iOS 视图的转换代码。
因此,要完成您的要求,您需要找到 Expo 包含在其 platform/app 中的 "native" 绘图组件。或者你需要找到一个 "composite" 绘图组件,它是用其他默认的 React Native 组件(或其他 Expo 支持的组件)构建的。
即。在 Android 上,我可能会使用 Canvas 视图构建它,但据我所知,React Native 本身不支持该对象,所以我可能会自己编写它,等等
Expo 很难支持所有第 3 方 "native" 组件,因为 React Native 是开源的,而且迭代速度如此之快,以至于大多数 community-built 组件并不总是最新的,或者它们可能会相互冲突。
我知道已经有一段时间了,但这里有一篇有趣的文章:https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac
等等,但是怎么样?
使用“expo-pixi”,您可以添加一个组件,让您可以选择画笔的颜色、粗细和不透明度。然后,当您的用户抬起手指时,您会收到回调。从那里您可以截取透明视图的屏幕截图或获取原始点数据(如果您正在寻找的话)。
我正在使用 react-native-signature-capture。
在 Android 和 iOS.
上都能正常工作
我正在尝试了解如何在 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,但如果这不可能,请有人向我解释为什么?)
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 中 out-of-the-box。如果你想要其他组件,那么你有 2 个选择,要么创建一个 "composite" 组件,在该组件中你的 JS 组件被写入其他 JS 组件,或者,如果你的功能需要一个尚未被 React Native 公开的本地组件,写你的拥有 "native" 组件以向您的 React Native 代码公开某些本机功能。
Expo 的工作方式是他们包装了 React Native 和一些第 3 方组件,并将其构建在他们的应用程序中。您不能使用他们不支持的第 3 方本机组件的原因是因为当使用该组件时,应用程序本身没有从 JS 到本机 Android/iOS 视图的转换代码。
因此,要完成您的要求,您需要找到 Expo 包含在其 platform/app 中的 "native" 绘图组件。或者你需要找到一个 "composite" 绘图组件,它是用其他默认的 React Native 组件(或其他 Expo 支持的组件)构建的。
即。在 Android 上,我可能会使用 Canvas 视图构建它,但据我所知,React Native 本身不支持该对象,所以我可能会自己编写它,等等
Expo 很难支持所有第 3 方 "native" 组件,因为 React Native 是开源的,而且迭代速度如此之快,以至于大多数 community-built 组件并不总是最新的,或者它们可能会相互冲突。
我知道已经有一段时间了,但这里有一篇有趣的文章:https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac
等等,但是怎么样?
使用“expo-pixi”,您可以添加一个组件,让您可以选择画笔的颜色、粗细和不透明度。然后,当您的用户抬起手指时,您会收到回调。从那里您可以截取透明视图的屏幕截图或获取原始点数据(如果您正在寻找的话)。
我正在使用 react-native-signature-capture。 在 Android 和 iOS.
上都能正常工作