起因
因為項目中需要用到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