挂钩调用无效。钩子只能在函数组件的主体内部调用。在反应本机签名中 canvas

Question

我是 React Native 的新手。我已经在功能组件中反应本机签名 canvas 代码，但现在我在我的 class 组件代码中编写该代码。然后我收到这样的错误 = Invalid hook call。钩子只能在函数组件的主体内部调用。有什么问题请帮助。

这是代码

export default class Kyc extends Component {
  constructor(props) {
    super(props);

    this.state = {
       singleFileSIGN:''
    };
  }

 ref = useRef();


   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);
        this.setState({ singleFileSIGN: file.uri});
        console.log(singleFileSIGN)
      })
    }).catch(err => {
      console.log("err", err);
    })
};

handleEmpty ()  {
  console.log('Empty');
};

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

handleEnd () {
  ref.current.readSignature();
};


  render () {

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

Answer 1

Hooks 只用在函数组件中。在 class 中这样使用：

  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }

挂钩调用无效。钩子只能在函数组件的主体内部调用。在反应本机签名中 canvas

Invalid hook call. Hooks can only be called inside of the body of a function component. in react native signature canvas

react-native

canvas

digital-signature

signature