React Native之手写签名

3,785 阅读2分钟

起因

因为项目中需要用到App手写签名,大致需要下面几个要求

  • 基础的手写签名功能,支持设置画笔颜色、大小
  • 支持加载签名数据
  • 支持背景为透明(因为需要最终将该签名附加到word/pdf上面)

选库

搜索了一番github,大致找到两种类型的库(需要跨android/ios两端)

原生库

github.com/RepairShopr…

该库是基于原生封装,理论上最稳定的,但是发现不支持加载签名数据和设置背景透明,排除掉了

基于webview和signature_pad.js

该方案由于不涉及到原生,可以很方便的集成,后面也方便热更新,在查看几个基础该方案的库后,最终选择了下面基于该方案的库,功能很完善

github.com/kevinstumpf…

问题

注意,该库方便的版本是不支持设置画笔宽度的,需要自己手动改下,但是真不是事,改下就行了,严重的问题出现了,小米、华为的机型都没问题,但是oppo、vivo机型出现无法签名的情况,具体#16,该问题其实到目前还未解决,具体原因未知,大致是画板宽度和高度出现问题了

经过寻找,找到

github.com/JamesMcInto…

该库,经过测试,原先出现问题的两台oppo和vivo手机可以正常签名了,但是出现了严重的性能问题: 快速滑动的时候,只会出现下笔的点,后面的都是空白,慢慢写或者连续写没问题

排查

性能的问题肯定比兼容性问题更好解决,通过对上面问题的猜测,以及在真机的浏览器中测试signature_pad.js,发现很流畅且不存在兼容性问题,那肯定还是RN端封装的问题

最终发现是每次手写结束后,都会将签名数据转换成base64并传递到js端,这个极大的影响性能,毕竟RN和原生的传输效率堪忧,何况是每次都传递一张图片大小的数据

解决

问题找到,就比较好解决了,我们其实不用实时去获取签名数据,只需要在结束的时候获取下就行了

github.com/yz1311/reac…

该库相比官方版本:

1.解决oppo、vivo无法签名问题(至少是手中已有机型)

2.支持清空画板

3.支持设置画板的画笔宽度

$ yarn add @yz1311/react-native-signature-pad

其他

RN之Umeng友盟统计、分享、授权

android全量更新bugly

高性能Wheel Picker选择组件(日期、时间段、省市区三级联动)

RN阴影效果

RN高德地图导航库

RN实现清除本地缓存

RN实现自定义code-push热更新

RN之code-push-server管理App

RN博客园App