React-native-camera limit barcode scan area

问题

I am using the barcode scanner from react-native-camera and currently if I use it and there are multiple QR-codes closely on top of each other, I point my camera at one and it reads the code above it which is outside of the display on screen but within the cameras view. If however there is no QR-code above the one I want to scan, then it scans the correct one, so it seems like it always scans the top QR-code within the cameras view.

Here's my question: Is there a way to limit the "scan area" to be the same size and area as my camera view on my display?

<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'
  }
}

Versions, if needed:

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

回答1:

How about do you insert <View style='your style'/ > between <Camera> and </Camera>.

View will be a viewport (focusing on the View tag by 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 = { container: { height: 300, flex: 1 }, preview: { flex: 1 }, buttonStyle: { marginTop: 20, marginLeft: 20, marginRight: 20, marginBottom: 20, alignSelf: 'center' } } ```

回答2:

You can also alternatively use ac-qrcode-rn which is based upon react-native-camera.It supports both for ios and android and also scans both Qr code and Bar code

Scanning interface can be customized in many ways which helps the scanning UI look great for user. It provides many props through which you can make your own scan area with styles however you like.

来源：https://stackoverflow.com/questions/49880395/react-native-camera-limit-barcode-scan-area

标签

react-native

camera

qr-code

barcode

react-native-camera