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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM