如何一次扫描一个条码？

Question

实际上，我是 React 的新手，我正在尝试制作一个简单的条形码扫描仪，它在警报中显示扫描的条形码，在警报中按“确定”后，用户应该能够扫描另一个条形码。

问题是条形码会被连续扫描，当警报出现时，它会隐藏并每秒显示一次警报。

我试图做这样的事情来只显示一次警报，如果按下 OK 能够再次显示警报，但只有在按下 OK 但没有效果的情况下..

  onBarCodeRead = (e) => {

    if(!this.alertPresent){

      this.alertPresent = true;

          Alert.alert(

            "Barcode type is " + e.type,

            "Barcode value is " + e.data,

            [

                 {text: 'OK', onPress: () => this.alertPresent = false;},

            ],

              {cancelable: false},

          );

      }

  }

这是 Barcode.JS 的完整代码

import React, { Component } from 'react';

import { Button, Text, View,Alert } from 'react-native';

import { RNCamera } from 'react-native-camera';

import BarcodeMask from 'react-native-barcode-mask';

class ProductScanRNCamera extends Component {

  constructor(props) {

    super(props);

    this.camera = null;

    this.barcodeCodes = [];

    this.alertPresent = false;

    this.state = {

      camera: {

        flashMode: RNCamera.Constants.FlashMode.auto,

      }

    };

  }

  onBarCodeRead = (e) => {

    if(!this.alertPresent){

      this.alertPresent = true;

          Alert.alert(

            "Barcode type is " + e.type,

            "Barcode value is " + e.data,

            [

                 {text: 'OK', onPress: () => this.alertPresent = false;},

            ],

              {cancelable: false},

          );

      }

  }

  pendingView() {

    return (

      <View

      style={{

        flex: 1,

        backgroundColor: 'lightgreen',

        justifyContent: 'center',

        alignItems: 'center',

      }}

      >

      <Text>Waiting</Text>

      </View>

    );

  }

  render() {

    return (

      <View style={styles.container}>

      <RNCamera

      ref={ref => {

        this.camera = ref;

      }}

      defaultTouchToFocus

      flashMode={this.state.camera.flashMode}

      mirrorImage={false}

      onBarCodeRead={this.onBarCodeRead.bind(this)}

      onFocusChanged={() => {}}

      onZoomChanged={() => {}}

      style={styles.preview}

      >

      <BarcodeMask/>

      </RNCamera>

      </View>

    );

  }

}

Answer 1

这里的技巧是barcodeTypes使用内部状态修改道具。const defaultBarcodeTypes = [// should be all Types from RNCamera.Constants.BarCodeType];class ProductScanRNCamera extends Component {&nbsp; &nbsp;state = {&nbsp; &nbsp; &nbsp; // your other states&nbsp; &nbsp; &nbsp; barcodeType: '',&nbsp; &nbsp; &nbsp; barcodeValue: '',&nbsp; &nbsp; &nbsp; isBarcodeRead: false // default to false&nbsp; &nbsp;}&nbsp; &nbsp;onBarcodeRead(event) {&nbsp; &nbsp; &nbsp; this.setState({isBarcodeRead: true, barcodeType: event.type, barcodeValue: event.data});&nbsp; &nbsp;}&nbsp; &nbsp;// run CDU life-cycle hook and check isBarcodeRead state&nbsp; &nbsp;// Alert is a side-effect and should be handled as such.&nbsp; &nbsp;componentDidUpdate() {&nbsp; &nbsp; &nbsp; const {isBarcodeRead, barcodeType, barcodeValue} = this.state;&nbsp; &nbsp; &nbsp; if (isBarcodeRead) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Alert.alert(barcodeType, barcodeValue, [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text: 'OK',&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onPress: () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Reset everything&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.setState({isBarcodeRead: false, barcodeType: '', barcodeValue: ''})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}&nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp; const {isBarcodeRead} = this.state;&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<RNCamera {...your other props} barcodeTypes={isBarcodeRead ? [] : defaultBarcodeTypes}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BarcodeMask />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</RNCamera>&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp;}}钩子版本更干净const ProductScanRNCamera = () => {&nbsp; &nbsp;const [isBarcodeRead, setIsBarcodeRead] = useState(false);&nbsp; &nbsp;const [barcodeType, setBarcodeType] = useState('');&nbsp; &nbsp;const [barcodeValue, setBarcodeValue] = useState('');&nbsp; &nbsp;useEffect(() => {&nbsp; &nbsp; &nbsp; if (isBarcodeRead) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Alert.alert(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;barcodeType,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;barcodeValue,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'OK',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress: () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // reset everything&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setIsBarcodeRead(false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setBarcodeType('');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setBarcodeValue('');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}, [isBarcodeRead, barcodeType, barcodeValue]);&nbsp; &nbsp;const onBarcodeRead = event => {&nbsp; &nbsp; &nbsp; if (!isBarcodeRead) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setIsBarcodeRead(true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setBarcodeType(event.type);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setBarcodeValue(event.data);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; <RNCamera {...your props}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onBarCodeRead={onBarcodeRead}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; barcodeTypes={isBarcodeRead ? [] : defaultBarcodeTypes}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<BarcodeMask />&nbsp; &nbsp; &nbsp; </RNCamera>&nbsp; &nbsp;)}

Answer 2

使用 setState 来设置组件的状态。setState 将获取对象并更新组件的状态检查下面的代码import React, { Component } from 'react';import { Button, Text, View, Alert } from 'react-native';import { RNCamera } from 'react-native-camera';import BarcodeMask from 'react-native-barcode-mask';class ProductScanRNCamera extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.camera = null;&nbsp; &nbsp; this.barcodeCodes = [];&nbsp; &nbsp; this.showAlert = true;&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; camera: {&nbsp; &nbsp; &nbsp; &nbsp; flashMode: RNCamera.Constants.FlashMode.auto,&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; }&nbsp; onBarCodeRead = (e) => {&nbsp; &nbsp; if (this.state.alertPresent) {&nbsp; &nbsp; &nbsp; this.setState({ showAlert: false });&nbsp; &nbsp; &nbsp; Alert.alert(&nbsp; &nbsp; &nbsp; &nbsp; "Barcode type is " + e.type,&nbsp; &nbsp; &nbsp; &nbsp; "Barcode value is " + e.data,&nbsp; &nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'OK', onPress: () =>console.log('ok')&nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; { cancelable: false },&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; }&nbsp; pendingView() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View&nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'lightgreen',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: 'center',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alignItems: 'center',&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <Text>Waiting</Text>&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; <RNCamera&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={ref => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.camera = ref;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaultTouchToFocus&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flashMode={this.state.camera.flashMode}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mirrorImage={false}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onBarCodeRead={this.onBarCodeRead.bind(this)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onFocusChanged={() => { }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onZoomChanged={() => { }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={styles.preview}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BarcodeMask />&nbsp; &nbsp; &nbsp; &nbsp; </RNCamera>&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );&nbsp; }}