這個是類似手寫,簽名的做法,要引入art 和手勢系統(tǒng). 直接放代碼好了,需要用到的朋友自己理解下就會用了.

import React, {PureComponent, Component} from 'react';
import {
    StyleSheet,
    View,
    ART,
    Dimensions,
    PanResponder,
} from 'react-native';

const {
    Shape,
    Surface,
    Group,
    Path
} = ART
//獲取屏幕的寬高
const {width, height} = Dimensions.get('window');
export default class MyResponder extends PureComponent {


    constructor(props) {
        super(props);
        this.state = {
            //用于更新界面
            lastX: 0,

        };

        //每次移動的臨時數組
        this.MousePostion = {
            firstX:0, //起點 X 坐標
            firstY:0,// 起點 Y 坐標
            x: 0,   //經過路徑的x坐標
            y: 0    //經過路徑的y坐標
        }
        //path 全部路徑數組
        this.MousePostions = []
    }


    componentWillMount() {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onMoveShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onPanResponderGrant: (evt, gestureState) => {
                //手指按下時的畫筆起點坐標
                this.tempfirstX = evt.nativeEvent.pageX
                this.tempFirstY = evt.nativeEvent.pageY
            },//激活時做的動作
            onPanResponderMove: (evt, gestureState) => {

                //
                this.MousePostion = {
                    firstX:this.tempfirstX,
                    firstY:this.tempFirstY,
                    x: this.tempfirstX + gestureState.dx,
                    y: this.tempFirstY + gestureState.dy
                }
                this.MousePostions.push(this.MousePostion);

                //更新界面
                this.setState({
                    lastX: this.MousePostions[0].x + gestureState.dx,
                })


            }, //移動時作出的動作

            onPanResponderRelease: (evt, gestureState) => {
            },///動作釋放后做的動作

            onPanResponderTerminate: (evt, gestureState) => {
            },
        });

    }


    render() {

        const path = new Path();
        for (let i = 0; i < this.MousePostions.length; i++) {
            let tempFistX = this.MousePostions[i].firstX
            let tempFistY = this.MousePostions[i].firstY
            let tempX = this.MousePostions[i].x
            let tempY = this.MousePostions[i].y
            if (i == 0) {
                path.moveTo(tempFistX, tempFistY)
                path.lineTo(tempX, tempY)
                path.close();
            } else {
                let tempFistX_1 = this.MousePostions[i-1].firstX

                if(tempFistX==tempFistX_1){
                    let tempX_1 = this.MousePostions[i - 1].x
                    let tempY_1 = this.MousePostions[i - 1].y
                    path.moveTo(tempX_1, tempY_1)
                    path.lineTo(tempX, tempY)
                    path.close();
                }else {
                    path.moveTo(tempFistX, tempFistY)
                    path.lineTo(tempX, tempY)
                    path.close();
                }


            }

        }

        return (
            <View style={styles.container} {...this._panResponder.panHandlers} >
                <Surface width={width} height={height}>
                    <Group>
                        <Shape d={path} stroke="#000000" strokeWidth={1}/>
                    </Group>
                </Surface>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        // width: 300,
        // height: 300,
        flex: 1,
    },
});