React Native之手写签名
起因
因为项目中需要用到App手写签名,大致需要下面几个要求
- 基础的手写签名功能,支持设置画笔颜色、大小
- 支持加载签名数据
- 支持背景为透明(因为需要最终将该签名附加到word/pdf上面)
选库
搜索了一番github,大致找到两种类型的库(需要跨android/ios两端)
原生库
https://github.com/RepairShopr/react-native-signature-capture
该库是基于原生封装,理论上最稳定的,但是发现不支持加载签名数据和设置背景透明,排除掉了
基于webview和signature_pad.js
该方案由于不涉及到原生,可以很方便的集成,后面也方便热更新,在查看几个基础该方案的库后,最终选择了下面基于该方案的库,功能很完善
https://github.com/kevinstumpf/react-native-signature-pad
问题
注意,该库方便的版本是不支持设置画笔宽度的,需要自己手动改下,但是真不是事,改下就行了,严重的问题出现了,小米、华为的机型都没问题,但是oppo、vivo机型出现无法签名
的情况,具体#16,该问题其实到目前还未解决,具体原因未知,大致是画板宽度和高度出现问题了
经过寻找,找到
https://github.com/JamesMcIntosh/react-native-signature-pad
该库,经过测试,原先出现问题的两台oppo和vivo手机可以正常签名了,但是出现了严重的性能问题:
快速滑动的时候,只会出现下笔的点,后面的都是空白,慢慢写或者连续写没问题
排查
性能的问题肯定比兼容性问题更好解决,通过对上面问题的猜测,以及在真机的浏览器中测试signature_pad.js,发现很流畅且不存在兼容性问题,那肯定还是RN端封装的问题
最终发现是每次手写结束后,都会将签名数据转换成base64并传递到js端,这个极大的影响性能,毕竟RN和原生的传输效率堪忧,何况是每次都传递一张图片大小的数据
解决
问题找到,就比较好解决了,我们其实不用实时去获取签名数据,只需要在结束的时候获取下就行了
库
https://github.com/yz1311/react-native-signature-pad
该库相比官方版本:
1.解决oppo、vivo无法签名问题(至少是手中已有机型)
2.支持清空画板
3.支持设置画板的画笔宽度
$ yarn add @yz1311/react-native-signature-pad