react-native-signature-ink 是什么?
react-native-signature-ink 是一个 React Native 签名板,它使用各平台自带的墨迹引擎绘制,而不是 JavaScript 画布、Skia 或 WebView。
- iOS 使用 PencilKit(
PKCanvasView),也就是“备忘录”应用背后的引擎。压感、Apple Pencil 倾斜和 PencilKit 自带的平滑处理都无需额外配置。 - Android 使用经典速度贝塞尔签名算法的 Kotlin 移植版:笔画通过三次贝塞尔曲线平滑,笔速越快线条越细。墨迹绘制在离屏位图中,因此导出几乎是瞬间完成的。
你只需渲染一个组件 <SignatureInk />,并通过带类型的 ref 与它交互。
平台与架构
| 支持情况 | |
|---|---|
| iOS | 支持(Swift,PencilKit) |
| Android | 支持(Kotlin),API 24+ |
| 新架构(Fabric) | 必需。组件是由 codegen 生成的 Fabric 视图。 |
| Expo | 支持开发构建和 expo prebuild,不支持 Expo Go。 |
| Web | 不支持。该包仅面向原生平台。 |
能做什么
| 功能 | 文档 |
|---|---|
| 笔颜色、宽度范围、背景、签名基线 | Props |
| 通过代码撤销、重做、清除、复制、回放、导出 | Ref 方法 |
| 带自定义按钮和溢出菜单的原生工具栏 | 工具栏 |
| 响应笔画、内容变化、回放进度和工具栏点击 | 事件 |
| PNG、JPEG、SVG、剪贴板、相册 | 导出格式 |
| 保存并恢复笔画,重新播放动画 | 笔画数据与回放 |
| 仅允许 Apple Pencil 或手写笔输入 | Props |
| PencilKit 工具选择器和墨迹类型(iOS) | Props |
各部分如何协作
text
<SignatureInk ref={ref} /> 你的 props 和事件回调
│
▼
SignatureInkView (Fabric codegen) 一个原生视图,没有原生模块
│
├─ iOS:PKCanvasView、工具栏、基线、导出
└─ Android:速度贝塞尔画布、工具栏、基线、导出toBase64() 等 ref 方法以命令的形式发送给原生视图。结果通过一个内部事件返回,并 resolve 你正在 await 的 Promise,因此绘制期间不会阻塞 JS 线程。
两个组件
SignatureInk是推荐使用的组件。它提供 ref API、Promise 形式的结果和易用的事件数据。SignatureInkView是底层由 codegen 生成的原始组件。它使用原生端的 prop 名称,例如inkBackgroundColor和toolbarItemsJson,并且没有 Promise API。只有在你想自己驱动视图时才使用它。详见 API 参考。
下一步
致谢
Android 渲染器移植自 gcacace/android-signaturepad 及其后继项目 warting/android-signaturepad,它们采用了“Smoother Signatures”方法。