React-native-camera 限制条码扫描区域

Question

我正在使用来自 react-native-camera 的条码扫描仪目前，如果我使用它并且有多个 QR 码彼此紧密重叠，我会将我的相机指向一个，它会读取其上方的代码，该代码位于屏幕显示之外但在相机 View 内。但是，如果我要扫描的上面没有二维码，那么它会扫描正确的二维码，因此它似乎总是扫描相机 View 中的顶部二维码。

这是我的问题:有没有办法将“扫描区域”限制为与显示器上的相机 View 相同的大小和区域？

<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

编辑
由于还没有修复，我建议使用另一个库作为条形码掩码:https://github.com/shahnawaz/react-native-barcode-mask
您可以查看它并在您的项目中实现。
旧答案
现在您可以使用 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: frameWidth,
                        height: frameHeight,
                        borderWidth: 2,
                        borderColor: 'red',
                        opacity: 0.5,
                        }}
                    />
                </RNCamera>
            </View>
        );
    }
}