条形码扫描仪扫描一次，并在第二次扫描时显示相同的结果

Question

我有一个本机应用程序，我正在使用react-native-camera，我可以扫描一次，扫描结果显示没有任何问题。但是，当我进行第二次扫描时，它显示了相同的结果。我在一个标签中有条形码扫描仪，扫描后导航到不同的标签，结果如何。我如何扫描并多次显示结果？这是我的条形码扫描仪标签组件：

class BarScannerView extends Component {

  constructor(props) {
    super(props);
    this.camera = null;
    this.barcodeCodes = [];

    this.state = {
      changeScreen: false,
      camera: {
        type: RNCamera.Constants.Type.back,
        flashMode: RNCamera.Constants.FlashMode.auto,
        barcodeFinderVisible: true
      },
      focusedScreen: false
    };
  }

  onBarCodeRead = (scanResult) => {
    if (scanResult.data !== null) {
      let bacodeScanResult = scanResult.data
      AsyncStorage.setItem('barcodeValue', bacodeScanResult)
      this.props.navigation.navigate('Stock')
    }
    return;
  }

  componentDidMount() {
   
    console.log(' BarScanner componentDidMount was called...', this.props)
    const { navigation } = this.props;
    navigation.addListener('willFocus', () =>
      this.setState({ focusedScreen: true })
    );
    navigation.addListener('willBlur', () =>
      this.setState({ focusedScreen: false })
    );
  }

  componentWillUnmount() {
    console.log('BarScanner componentWillUnmount was called..')
    this.onBarCodeRead()
  }

  render() {
    const { focusedScreen } = this.state;
    if (focusedScreen) { 
      return (
        <View style={styles.container}>
          <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            barcodeFinderVisible={this.state.camera.barcodeFinderVisible}
            barcodeFinderWidth={280}
            barcodeFinderHeight={220}
            barcodeFinderBorderColor="white"
            barcodeFinderBorderWidth={2}
            defaultTouchToFocus
            flashMode={this.state.camera.flashMode}
            onBarCodeRead={this.onBarCodeRead}
            onFocusChanged={() => { }}
            onZoomChanged={() => { }}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            style={styles.preview}
            type={this.state.camera.type}
          />

          <View style={[styles.overlay, styles.topOverlay]}>
            <Text style={styles.scanScreenMessage}>Please scan the barcode.</Text>
          </View>

          <View style={{ position: 'absolute', top: 150, left: '12%' }}>
            <View
              style={{
                width: 300,
                height: 300,
                backgroundColor: 'transparent',
                borderColor: 'white',
                borderWidth: 1
              }}
            >
            </View>
          </View>

          <View style={[styles.overlay, styles.bottomOverlay]}>
            <Button
              disabled
              onPress={() => { console.log('scan clicked'); }}
              style={styles.enterBarcodeManualButton}
              title="Choose Barcode"
            />
          </View>
        </View>
      );
    } else {
      return <Stock/>
    }
      
    }
  }


export default BarScannerView

当用户第二次进入此条形码扫描仪选项卡时，如何删除以前的结果？

附加信息：

• 反应原生版：“0.57.8”
• React Navigation v3
• React-Native-Camera“^ 1.6.4”

Answer 1

您需要使用this.props.navigation.push而不是this.props.navigation.navigate才能将navigate添加到同一屏幕并显示新内容。

导航推送反应导航只需毫不犹豫地将新屏幕推送到堆栈。

导航导航React导航将搜索堆栈中的屏幕，如果屏幕存在，它将导航到它，否则它将添加到堆栈并导航。