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
posted @ 2019-09-25 17:29  做一个清醒者  阅读(3136)  评论(15编辑  收藏  举报