react-native-canvas
react-native-canvas copied to clipboard
iddan
removeEventListener()
Hello, iddan, when I unMount my component, I get the error : "ExceptionsManager.js:65 Error: Image must be initialized with a Canvas instance".I think we should remove the Image load listener when I unmount the component in the ComponentWillUnMount function, but I dot't know how to do it,please give me a favor,thanks a lot!
Yes! The code is :
componentWillUnmount() {
this.image.removeEventListener('load', this.renderImage);
// window.removeEventListener('load', this.handleImageRect);
}
handleImageRect = (canvas) => {
this.image = new CanvasImage(canvas);
canvas.width = 312;
canvas.height = 413;
const context = canvas.getContext('2d');
const that = this;
this.image.src = 'https://image.freepik.com/free-vector/unicorn-background-design_1324-79.jpg';
this.image.addEventListener('load', () => {
context.drawImage(this.image, 0, 0, 312, 413);
context.fillStyle = 'black';
context.font = 13 + 'px PingFangSC-Regular';
context.fillText('二零一八年 九月', 22, 30);
context.font = 62 + 'px Didot';
context.fillText('28', 22, 90);
context.font = 62 + 'px Didot';
context.fillText('一', 22, 150);
context.font = 13 + 'px PingFangSC-Regular';
context.fillText('我的金额：320', 22, 180);
context.font = 13 + 'px PingFangSC-Regular';
context.fillText('这是一条签语，预计可以放下二十八个汉字', 22, 300);
context.font = 13 + 'px PingFangSC-Regular';
context.fillText('---作者', 250, 330);
const that = this;
console.log('888', this.image);
canvas.toDataURL('image/png').then((testImg) => {
this.setState({
testImg: testImg
})
})
});
}
render() {
return <Canvas ref={this.handleImageRect} />
}
when click the topLeft button , componentUnmounted, but the 'load' listener is always presence
It seems like removeEventListener() implementation is missing. It should be added here: https://github.com/iddan/react-native-canvas/blob/983aa21d6eef86c108cd3b15b87ca373ffe221f4/src/webview-binders.js#L101
Hi iddan!You write so cool code ,but I can't understand it quickly. My question is: Why is the component uninstalled and canvas. JS still running? I hope you can solve this removeEventListene() bug.THANKS!
Hey SiJieMa, thank you for using React Native Canvas. Currently, the implementation misses a definition for the removeEventListener(). To implement it you should mimic the implementation of addEventListener(). As said before: I'm not available to do this currently but very willing to guide for a PR.
