@yz1311/react-native-signature-pad

react-native-signature-pad

React Native wrapper around @szimek's HTML5 Canvas based Signature Pad

• Supports Android and iOS
• Pure JavaScript implementation with no native dependencies
• Tested with RN 0.40
• Can easily be rotated using the "transform" style
• Generates a base64 encoded png image of the signature

这个库跟最原始的有啥区别:

• 修复部分android手机上间歇性出现无法手写的情况(oppo、vivo的情况特别严重)

• 添加清空画板功能(清空画板也可以通过更改组件的key属性或者隐藏再显示的方式来实现)

更新日志

2019/09/02

对使用webview相关的库绝望了，

官方库: 在部分oppo/vivo手机上面无法手写，或者清空后无法手写

https://github.com/JamesMcIntosh/react-native-signature-pad :该库没有兼容性问题，但是很卡，特别是手写较快(真的不是很快)的情况下

https://github.com/YanYuanFE/react-native-signature-canvas :跟官方库一样的毛病

https://github.com/RepairShopr/react-native-signature-capture :最有希望的库了,基于原生，但是不支持还原签名数据和设置透明背景

2019/09/20

https://github.com/JamesMcIntosh/react-native-signature-pad

在该库的基础上面，改变了数据返回的方式，不是画完就返回，而是手动去获取数据然后返回(卡的原因就是每次画完都返回，传输速度慢了))

2019/09/21

修复ios下面postMessage无法传递参数到web的问题，目前两端已能正常使用

Demo

Installation

$ yarn add @yz1311/react-native-signature-pad  react-native-webview

Using a Custom Signature Font

There is an option to generate a signature based off the user's name. You can use your own custom font. Currently, we recommend converting your font file into a data URL (we used dataurl.net). Store that in a .js file with the contents similar to something like below:

var content = `
  @font-face {
    font-family: 'SignatureFont';
    src: url(/* data url of your font */) format(/* orig font file type i.e. 'ttf' */);
  }
`;

export default content;

Generating a Signature from a String

If you would like to generate a signature as opposed to manually writing your own, you can enable the useFont prop to true and use the prop name where the generated signature will be based from.

...

var signatureFont = require('./signature-font');

...

var aName = 'John Doe';

<SignaturePad
  ...
  useFont={true}
  name={aName}
  fontStyle={signatureFont}
/>

Example

import React, {Component} from 'react';
import {View} from 'react-native';
import SignaturePad from '@yz1311/react-native-signature-pad';

var penMinWidth = 2;  // Default value: 1
var penMaxWidth = 3;  // Default value: 4

export default class Demo extends Component {
  render = () => {
    return (
      <View style={{flex: 1}}>
        <SignaturePad
          ref=(ref=>this.signaturePad=ref)
          onError={this._signaturePadError}
          onChange={this._signaturePadChange}  //该事件已失效，影响性能
          penMinWidth={penMinWidth}
          penMaxWidth={penMaxWidth}
          style={{flex: 1, backgroundColor: 'white'}}
          useFont={false}
        />
      </View>
    )
  };

  _signaturePadError = (error) => {
    console.error(error);
  };

  _signaturePadChange = ({base64DataUrl}) => {
    console.log("Got new signature: " + base64DataUrl);
  };

  getDataURL = async () => {
    try{
      //主动获取结果
        let base64Str = await this.signaturePad.getDataURL();
    } catch(e) {

    }  
  }

  getIsEmpty = async () => {
    //获取是否有手写,true/false表示有结果，undefined表示获取失败
    const isEmpty = await this.signaturePad.getIsEmpty();
  }
}

Android 7 WebView Changes

Google changed the default behaviour for WebViews with Android 7 (Nougat). In apps that use WebViews, it no longer uses the WebView APK in previous versions but instead it uses the Chrome WebView.

Source: https://developer.android.com/about/versions/nougat/android-7.0.html#webview

Because of this, WebView's onMessage prop replaces onChange previously used. However, onMessage was not implemented in React Native WebView until React Native v0.37.