如何在 react-native-qrcode-scanner 中关闭 camera/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 您可以渲染二维码扫描器。

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

这有助于我解决问题。在显示其他视图时不进行扫描，而是在再次显示该视图时进行扫描。归功于 pkyeck on github.com

Answer 2

如文档中所述，您可以通过编程方式完成

  <QRCodeScanner
      onRead={this.onSuccess}
      ref={(node) => { this.scanner = node }}  <-- add this
    />

并在您的方法中（例如，在 Alert 或 onPress 按钮中），像这样激活扫描器：

 onPress: () => {
      this.scanner.reactivate()
    },

Answer 3

在功能组件或使用钩子中与上面提到的相同

import React, {useEffect, useState} from 'react';

const ScannerCamera = ({navigation, route}) => {
  let uuId = null;
  const [viewFocused, setViewFocused] = useState(false);

  useEffect(() => {
    const onFocus = navigation.addListener('focus', () => {
      setViewFocused(true);
    });

    const onBlur = navigation.addListener('blur', () => {
      setViewFocused(false);
    });

    return {onFocus, onBlur};
  }, [navigation]);

  return (
    viewFocused && (
      <QRCodeScanner
        containerStyle={{height: SCREEN_HEIGHT}}
        cameraStyle={[{height: SCREEN_HEIGHT}]}
        showMarker={true}
        onRead={onSuccess}
        flashMode={RNCamera.Constants.FlashMode.auto}
      />
    )
  );
};

Answer 4

使用 React 挂钩：

let scanner = useRef(null);

<QRCodeScanner
onRead={onSuccess}
ref={node => { scanner = node;}}
/>

然后你可以把它附加到一个按钮上。例如：

onPress={() => scanner.reactivate()}

如何在 react-native-qrcode-scanner 中关闭 camera/scanner？

How do I shut of camera/scanner in react-native-qrcode-scanner?

qr-code

react-native