React Native之手写签名

原由

由于项目中须要用到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
复制代码