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

最新推荐文章于 2024-12-27 13:04:31 发布

原创最新推荐文章于 2024-12-27 13:04:31 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #动画

本文解决了一个React Native应用中使用AC-QRCode-RN插件导致的交互问题。具体表现为，在扫描二维码后，其他页面上的某些操作无法正常进行。通过分析插件源码，发现其包含一个无限循环的动画，即使离开扫描页面，动画仍会持续运行。文中提供了一种解决方案，通过引入一个状态变量来控制动画的停止。

现象

同事在项目中需要扫描二维码的功能，使用了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());
}