如何在react-native-qrcode-scanner中关闭相机/扫描仪？

Question

当前代码：

import QRCodeScanner from 'react-native-qrcode-scanner';
function ScanScreen({ navigation }) {
  return (
    <SafeAreaView style={styles.screen}>
      <QRCodeScanner reactivate={true} reactivateTimeout={3000}
        onRead={data => navigation.navigate('Third', {target:data.data})}
      />
    </SafeAreaView>
  );
}

它可以工作，但这就是我想要做的：用户可以在屏幕之间导航，其中之一是二维码扫描仪。扫描时，我需要对扫描仪进行去抖处理，这样它就不会继续生成 onRead 事件。用户可以 a) 在扫描屏幕中开始扫描，而无需读取 QR 码，然后手动导航到另一个屏幕。b) 读取二维码并自动移至另一个屏幕进行处理，然后返回再次扫描。因此，我需要在一段合理的时间后重新启用扫描仪。我不能只是将 reactivate 设置为 false，因为这样 QR 扫描仪将处于非活动状态，直到我重新启动应用程序。问题是，当用户停留在另一个屏幕时，QR 扫描仪会在超时后重新激活，并在不需要时尝试扫描。我理想的做法是在用户不在扫描屏幕中时停用 QR 扫描仪，并在用户进入扫描屏幕时使用上述参数重新激活它。有什么办法可以做到这一点吗？谢谢！

Answer 1

我有几乎同样的问题。扫描仪在显示另一个视图时不会停止扫描（使用reactivate={true}）。我正在使用反应导航，所以我提出了以下解决方案。

focus您可以使用和来聆听您的视图中发生的情况blur。

this.props.navigation.addListener('focus', () => {
    this.setState({viewFocused: true});
});

this.props.navigation.addListener('blur', () => {
    this.setState({viewFocused: false});
});

注意：您将这段代码放入componentDidMount或使用React.useEffect.

根据状态，viewFocused您可以渲染 QR 码扫描仪。

this.state.viewFocused && (
    <QRCodeScanner
        onRead={onRead}
        reactivate={true}
        reactivateTimeout={2000}
    /> );

这有助于我解决我的问题。显示其他视图时不扫描，但再次显示该视图时进行扫描。感谢 github.com 上的 pkyeck