6

我正在使用react-native-camera的条形码扫描仪，目前，如果我使用它并且有多个 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",
4

3 回答 3

3

编辑

由于还没有修复，我建议使用另一个库作为条形码掩码：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>
        );
    }
}
于 2020-03-18T17:34:31.627 回答
0

您也可以选择使用基于 react-native-camera的 ac-qrcode-rn。它同时支持 ios 和 android，还可以扫描二维码和条形码

可以通过多种方式自定义扫描界面，这有助于扫描 UI 看起来非常适合用户。它提供了许多道具，您可以通过这些道具使用您喜欢的样式制作自己的扫描区域。

于 2018-08-23T09:27:07.540 回答
0

在and<View style='your style'/ >之间插入怎么样。<Camera></Camera>

View 将是一个视口（专注于 View 标签 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>

常量样式= {容器：{高度：300，flex：1}，预览：{flex：1}，buttonStyle：{marginTop：20，marginLeft：20，marginRight：20，marginBottom：20，alignSelf：'center'}} ```

于 2018-05-09T10:16:13.390 回答