React-Native工程，使用AC-QRCode-RN插件导致其他页面的InteractionManager方法不被执行

现象

同事在项目中需要扫描二维码的功能，使用了AC-QRCode-RN（github地址）这个插件，在扫描二维码界面调用该插件之后发现，进入其他页面之后，其他页面中的InteractionManager.runAfterInteractions方法都无法执行了。

发生原因

Interactionmanager的作用是可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。
基于这个判断，我们怀疑，虽然扫描二维码页面退出了，但是动画仍然在运行。
我查看了AC-QRCode-RN（github地址）这个插件的代码，发现了如下代码：

scannerLineMove() {    this.state.animatedValue.setValue(0);  //重置Rotate动画值为0    Animated.timing(this.state.animatedValue, {        toValue: this.props.rectHeight,        duration: this.props.scanBarAnimateTime,        easing: Easing.linear    }).start(() => this.scannerLineMove());}

这是一个循环调用的动画效果，即使页面退出，这个动画也不会结束。

解决方案

在页面中声明一个本地变量，初始化是设置为false，当componentWillUnmount方法被回调时将该变量设置为true，在运行这个动画时，判断该变量的值，当为true时退出，关键代码如下所示：

# AC-QRCode-RN 中的 QRScanner.js 文件let isClosed = false;...省略若干代码...componentWillUnmount() {    isClosed = true;}...省略若干代码...scannerLineMove() {    if (isClosed) {        return;    }    this.state.animatedValue.setValue(0);  //重置Rotate动画值为0    Animated.timing(this.state.animatedValue, {        toValue: this.props.rectHeight,        duration: this.props.scanBarAnimateTime,        easing: Easing.linear    }).start(() => this.scannerLineMove());}

如果您有任何疑问或本文侵犯了您的著作权，请联系我。mail to kylin