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
複製代碼