react-native - 如何将反应原生签名画布功能组件转换为类组件

Question

我是新来的反应本地人。我不知道如何将功能组件转换为类组件。请帮忙。这是我在功能组件中的本机签名画布代码的代码我想将其转换为类组件，请帮助谢谢。

const ref = useRef();


    const handleSignature = signature => {
      const path = FileSystem.cacheDirectory + 'sign.png';
  FileSystem.writeAsStringAsync(path, signature.replace('data:image/png;base64,', ''), {encoding: FileSystem.EncodingType.Base64}).then(res => {
    
        // console.log(res);
        // FileSystem.getInfoAsync(path, {size: true, md5: true}).then(file => {
          FileSystem.getInfoAsync(path).then(file => {
          console.log(file);
          setSingleFileSIGN({ singleFileSIGN: file.uri});
          console.log(singleFileSIGN)
        })
      }).catch(err => {
        console.log("err", err);
      })
  };

  const handleEmpty = () => {
    console.log('Empty');
  };

  const handleClear = () => {
    console.log('clear success!');
  };

  const handleEnd = () => {
    ref.current.readSignature();
  };
  


 <View style={{flex: 1, width:355, 
              ...Platform.select({
      android: {
         marginBottom:-80,
        borderColor: '#FF8C00',
        borderWidth:1
      //  marginBottom:-150
      },
    }),
    }}>
                    <SignatureScreen style={{height: '400%'}}
                        ref={ref}
                        onEnd={handleEnd}
                        onOK={handleSignature}
                        onEmpty={handleEmpty}
                        onClear={handleClear}
                        descriptionText={'Sign here!'}
                    />
              </View>

标签： react-nativesignature

Answer 1

 const signatureRef = createRef()

    clearSignature = async () => {
        await signatureRef.current?.clearSignature()
    }

    handleOK = async (signature) => {
        const sign = signature.split(",").pop()
        await this.setState({
            signatureVal: sign
        })
        // onOK(signature); // Callback from Component props
    };

    handleEnd = async () => {
        await this.setState({isScrollEnabled: true})
        await signatureRef.current?.readSignature()
    }

    render(){
      <View>
         <SignatureScreen
            ref={signatureRef}
            onOK={this.handleOK}
            onEnd={this.handleEnd}
            androidHardwareAccelerationDisabled={true}
            onBegin={async () => {await this.setState({
                isScrollEnabled: false
            })}}
         />
      </View>
    }