React-native-камера ограничивает область сканирования штрих-кода

Question

Я использую сканер штрих-кода от реагирующей нативной камеры, и в настоящее время, если я использую его и несколько QR-кодов располагаются близко друг к другу, я указываю на мою камеру, и она считывает код над ним, который находится вне отображать на экране, но в поле зрения камер. Однако, если нет QR-кода выше того, который я хочу отсканировать, то он сканирует правильный, поэтому кажется, что он всегда сканирует верхний QR-код в поле зрения камеры.

Вот мой вопрос: есть ли способ ограничить "область сканирования" тем же размером и площадью, что и изображение моей камеры на моем дисплее?

<View style={styles.container}>
  <Camera
    style={styles.preview}
    onBarCodeRead={this.onBarCodeRead}
    ref={cam => this.camera = cam}
    aspect={Camera.constants.Aspect.fill}>
  </Camera>
  <Button
    style={styles.buttonStyle}
    <Text>{this.state.qrcode}</Text>
  </Button>
</View>

const styles = {
  container: {
    height: 300,
    flex: 1
  },
  preview: {
    flex: 1
  },
  buttonStyle: {
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 20,
    alignSelf: 'center'
  }
}

Версии, если необходимо:

"react-native": "0.42.3",
"react-native-camera": "0.6.0",

Answer 1

Теперь вы можете ограничить область сканирования с помощью react-native-camera просто не забудьте импортировать версию 3.19.2 или выше.

const CAM_VIEW_HEIGHT = Dimensions.get('screen').width * 1.5;
const CAM_VIEW_WIDTH = Dimensions.get('screen').width;

const leftMargin = 100;
const topMargin = 50;
const frameWidth = 200;
const frameHeight = 250;

const scanAreaX = leftMargin / CAM_VIEW_HEIGHT;
const scanAreaY = topMargin / CAM_VIEW_WIDTH;
const scanAreaWidth = frameWidth / CAM_VIEW_HEIGHT;
const scanAreaHeight = frameHeight / CAM_VIEW_WIDTH;

class Demo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <RNCamera
                    rectOfInterest={{
                        x: scanAreaX,
                        y: scanAreaY,
                        width: scanAreaWidth,
                        height: scanAreaHeight,
                    }}
                    cameraViewDimensions={{
                        width: CAM_VIEW_WIDTH,
                        height: CAM_VIEW_HEIGHT,
                    }}
                    >
                    <View
                        style={{
                        position: 'absolute',
                        top: leftMargin,
                        right: topMargin,
                        width: frameHeight,
                        height: frameWidth,
                        borderWidth: 2,
                        borderColor: 'red',
                        opacity: 0.5,
                        }}
                    />
                </RNCamera>
            </View>
        );
    }
}

Answer 2

      import {RNCamera} from 'react-native-camera';
import BarcodeMask from 'react-native-barcode-mask';

const CAM_VIEW_HEIGHT = Dimensions.get('window').height;
const CAM_VIEW_WIDTH = Dimensions.get('window').width;

const left = (Dimensions.get('window').width - 250) / 2;
const top = Dimensions.get('window').height / 2 - 125;

 // this function , in class
 barcodeReceived(e) {
    let coordinat = e.bounds.origin;

    let x_oran = e.bounds.width / CAM_VIEW_WIDTH;
    let y_oran = e.bounds.height / CAM_VIEW_HEIGHT;

    let my_left = left * x_oran;
    let my_left2 = left + 250 * x_oran;
    let my_top = top * y_oran;
    let my_top2 = top + 250 * y_oran;

    if (
      coordinat[3].x < my_left2 &&
      coordinat[3].y < my_top2 &&
      coordinat[2].x > my_left &&
      coordinat[2].y < my_top2 &&
      coordinat[1].x > my_left &&
      coordinat[1].y > my_top &&
      coordinat[0].x < my_left2 &&
      coordinat[0].y > my_top
    ) {
      //ALL DATA in custom area 250*250
      console.log(e);
    }
  
    <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={{
            flex: 1,
            justifyContent: 'flex-end',
            alignItems: 'center',
            elevation: 2,
          }}
          type={RNCamera.Constants.Type.back}
          onBarCodeRead={async e => {
            this.barcodeReceived(e);
          }}
          barCodeTypes={RNCamera.Constants.BarCodeType.qr}>
          <BarcodeMask
            width={250}
            height={250}
            edgeColor="#40BDDE"
            outerMaskOpacity={0.5}
            showAnimatedLine={true}
            animatedLineColor="#40BDDE"
          />
        </RNCamera>

Answer 3

Как насчет того, чтобы вставить <View style='your style'/ > между <Camera> а также </Camera>,

Вид будет окном просмотра (с фокусировкой на тег просмотра по камере)

<View style={styles.container}>
   <Camera
    style={styles.preview}
    onBarCodeRead={this.onBarCodeRead}
    ref={cam => this.camera = cam}
    aspect={Camera.constants.Aspect.fill}>

    <View style={'your style'}/>

   </Camera>
   <Button
     style={styles.buttonStyle}
      <Text>{this.state.qrcode}</Text>
   </Button>
</View>

const styles = {контейнер: {высота: 300, flex: 1 }, предварительный просмотр: { flex: 1 }, buttonStyle: { marginTop: 20, marginLeft: 20, marginRight: 20, marginBottom: 20, alignSelf: 'center' } } ```

Answer 4

В качестве альтернативы вы также можете использовать ac-qrcode-rn, который основан на act -native- camera. Он поддерживает как ios, так и android, а также сканирует как Qr-код, так и штрих-код.

Интерфейс сканирования может быть настроен разными способами, что помогает пользовательскому интерфейсу сканирования выглядеть великолепно. Он предоставляет множество реквизитов, с помощью которых вы можете создать собственную область сканирования со стилями, которые вам нравятся.