Сканер штрих-кода сканирует один раз и показывает тот же результат при повторном сканировании

Question

У меня есть собственное приложение реагирования, в котором я использую реагирующую камеру, и я могу сканировать один раз, и результат сканирования отображается без проблем.Но когда я иду на второе сканирование, он показывает тот же результат. У меня есть сканер штрих-кода на одной вкладке, и после сканирования он переходит на другую вкладку с результатом. Как я могу сканировать и показывать результаты более одного раза?Вот компонент вкладки сканера штрих-кода, который у меня есть:

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

Как удалить предыдущий результат, когда пользователь во второй раз переходит на эту вкладку сканера штрих-кода?

Дополнительная информация:

• React Native версия: "0.57.8"
• React Navigation v3
• React-Native-Camera "^ 1.6.4"

Answer 1

Вам нужно использовать this.props.navigation.push вместо this.props.navigation.navigate, чтобы navigate отображать тот же экран и показывать новый контент.

Навигационный толчок Реагируйте на навигацию, просто вставив новый экран в стек без колебаний.

Навигация по навигации Реактивная навигация выполнит поиск экрана в стеке, если экран присутствует, он перейдет к нему, в противном случае он добавит его в стек и перейдет.