react-native-android-signaturepad

    2.2.1 • Public • Published

    react-native-android-signaturepad

    Integrate https://github.com/gcacace/android-signaturepad into react-native/android

    Install npm version npm version

    npm i react-native-android-signaturepad

    Demo

    Example: https://github.com/React-Sextant/react-native-android-signaturepad/blob/master/example/RNAndroidSignaturePad.js

    ONLY IN Android

    import React from 'react'
    import {Button,View} from 'react-native'
    import SignaturePad from 'react-native-android-signaturepad'
     
    export default class extends React.Component {
        state={
            erasing:false
        };
     
        clear=()=>{
            this.refs._signaturePad.clear();
        };
     
        undo=()=>{
            this.refs._signaturePad.undo(callback:options);
        };
     
        render(){
            return (
                <View style={{flex:1}}>
                    <SignaturePad
                        ref={"_signaturePad"}
                        style={{flex:1,backgroundColor:'yellow'}}
                        penMaxWidth={7}
                        penMinWidth={3}
                        undo={true}
                        bitmap={"base64"}
                        erasing={this.state.erasing}
                        onChange={(event)=>{
                            let message = event.nativeEvent.message;
                            console.log(message)
                        }}
                    />
                    <Button title={"clear"} onPress={this.clear}/>
                    <Button title={"undo"} onPress={this.undo}/>
                </View>
            )
        }
    }

    Usage

    https://github.com/gcacace/android-signaturepad

    Changelog

    • 1.0.4

      1.添加 erasing={boolean}橡皮擦功能

    • 2.1.0

      1.添加undo()回退功能

      2.添加undoprops控制回退功能的启用(默认为true,可能会占用一定内存)

    • 2.2.1

      1.添加bitmap={string}初始化时会渲染传入的bitmap

    • Future

      1.Add BackgroundImage support

    其他

    使用<Image />渲染bitmap记得添加前缀'data:image/png;base64,'以作为base64格式数据

     
    this.setState({bitmap:await this.refs._signaturePad.getTransparentSignatureBitmap()})
     
    <Image source={{uri:'data:image/png;base64,'+bitmap}}

    Install

    npm i react-native-android-signaturepad

    DownloadsWeekly Downloads

    0

    Version

    2.2.1

    License

    ISC

    Unpacked Size

    886 kB

    Total Files

    129

    Last publish

    Collaborators

    • 1uokun