React-native-camera限制条形码扫描区域 [英] React-native-camera limit barcode scan area

问题描述

我正在使用来自 react-native-camera 当前，如果我使用它，并且彼此之间紧挨着多个QR码，我将相机对准一个，它读取屏幕上方但在相机视图内的上面的代码.但是，如果在我要扫描的QR码上方没有QR码，则它将扫描正确的QR码，因此似乎总是在摄像机视图中扫描顶部的QR码.

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

版本，如果需要的话:

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

推荐答案

现在，您可以使用react-native-camera限制扫描区域，只需确保导入3.19.2或更高版本即可.

Now you can limit scan area with react-native-camera just make sure to import version 3.19.2 or greater.

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>
        );
    }
}

这篇关于React-native-camera限制条形码扫描区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！