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