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

【问题标题】：How do I shut of camera/scanner in react-native-qrcode-scanner?如何在 react-native-qrcode-scanner 中关闭相机/扫描仪？
【发布时间】：2020-02-20 10:42:31
【问题描述】：

当前代码：

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) 读取 QR 并自动移动到另一个屏幕进行处理，然后返回再次扫描。出于这个原因，我需要在一段合理的时间后重新启用扫描仪。我不能只将 reactivate 设置为 false，因为 QR 扫描仪在我重新启动应用程序之前处于非活动状态。问题是当用户停留在另一个屏幕时，QR 扫描仪会在超时后重新激活，并在不需要时尝试扫描。我最理想的做法是在用户不在扫描屏幕时停用 QR 扫描仪，并在用户进入扫描屏幕时使用上述参数重新激活它。有没有办法做到这一点？谢谢！

【问题讨论】：

你可以做的是在调用 onRead 关闭模态时将 QRCodeScanner 放入模态，因此它只会读取一次数据

标签： react-native qr-code

【解决方案1】：

使用 React 钩子：

let scanner = useRef(null);

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

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

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

【讨论】：

【解决方案2】：

如文档中所述，您可以通过程序进行操作

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

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

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

【讨论】：

【解决方案3】：

我几乎遇到了同样的问题。扫描仪在显示另一个视图时不会停止扫描（使用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

【讨论】：

【解决方案4】：

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

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}
      />
    )
  );
};

【讨论】：