Due
Because the project will need App handwritten signature, generally require several requirements below
- Based on handwritten signatures, support for setting pen color, size
- Support for loading signature data
- Supports transparent background (as the signature is added to the final required word / pdf above)
Selected library
Search a lot github, generally find two types of libraries (need cross-android / both ends ios)
Native library
https://github.com/RepairShopr/react-native-signature-capture
The library is based on the original packaging, in theory, the most stable, but found that the signature does not support loading data and set the background transparent, ruled out
Based on webview and signature_pad.js
Because the program does not involve native, it can be easily integrated, easy to heat back also updated After a review of several libraries basis of the program, the final choice below based on the program's library, function perfect
https://github.com/kevinstumpf/react-native-signature-pad
problem
Note, convenient version of the library is not supported by the pen width settings, you need to manually change the next, but it really was not something on the line change under serious question arises, millet, Huawei models no problem, but oppo、vivo机型出现无法签名the situation specifically # 16 , which has yet to solve the problem in fact, the specific reasons unknown, the drawing board is roughly the width and height of the problem
After looking to find
https://github.com/JamesMcIntosh/react-native-signature-pad
The library has been tested, the original problem of two oppo vivo and cell phone can be a normal signature, but a serious performance problem:
Swipe the time, getting a point will appear later are blank, write slowly or continuous write no problem
Investigation
Problem solving performance is certainly better than the compatibility problem by speculation about the above issues, as well as the real machine test in the browser in signature_pad.js , we found very smooth and there are no compatibility issues, it is certainly still RN end packaging problems
Finally found the end of each handwritten signature data will be converted into base64 and passed to js end, this greatly affect performance, after all, RN and native transfer efficiency worrying, not to mention every passing data size of a picture
solve
The problem is found, it is better to solve, in fact, we do not have to get real-time signature data, just in time to get on the end of the line
Storehouse
https://github.com/yz1311/react-native-signature-pad
The library compared to the official version:
1. solve oppo, vivo unable signature issue (at least in the hands of existing models)
2. Support Empty drawing board
3. Set the drawing board supports pen width
$ yarn add @yz1311/react-native-signature-pad