Question

我有一个react native应用程序，其中我正在使用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”
反应导航v3
React-Native-Camera“ ^ 1.6.4”

Answer 1

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

导航推送 React导航会毫不犹豫地将新屏幕推送到堆栈中。

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

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

1 个答案: