react-native-camera 限制条码扫描区域答案

【问题标题】：React-native-camera limit barcode scan areareact-native-camera 限制条码扫描区域
【发布时间】：2018-09-27 13:20:22
【问题描述】：

我正在使用来自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",

【问题讨论】：

您找到解决方法如何禁用屏蔽区域的扫描功能了吗？

标签： react-native camera qr-code barcode react-native-camera

【解决方案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>
        );
    }
}

【讨论】：

太棒了。正是我要找的东西
我真的不知道发生了什么事，但它就是行不通。我可以看到红色矩形，但它仍然扫描整个屏幕，是因为我使用的是 onTextRecognized 而不是 QRcode 吗？
@Amor.o 我还注意到它正在扫描整个屏幕。看起来这个解决方案只是将限制显示为 UI
@EdisonBiba 确实，这太奇怪了，因为他们在文档中没有提及任何内容。但是，我认为我找到了一种解决方法，在扫描对象（文本或二维码）时，RNCamera 将返回一个包含值 + 一些其他详细信息的块，在这些详细信息中有“原点”，它具有 x 和 y扫描值。因此，我可以让它扫描整个屏幕，但我会创建一个 if 条件来处理我的自定义区域中的块（使用 x y 值）。我知道这是一种不好的做法，但总比没有好，你怎么看？
这是一种解决方法，但我不认为你在性能方面会赢得一些东西，因为它已经在扫描整个区域并且它只会在找到 qr 或一段文字。唯一看起来可行的情况是，当用户必须扫描二维码但有多个二维码，而您希望相机只扫描盒子外的二维码时（它也会扫描盒子外的二维码）。

【解决方案2】：

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

可以通过多种方式自定义扫描界面，这有助于扫描 UI 对用户来说看起来很棒。它提供了许多道具，通过这些道具，您可以根据自己的喜好制作自己的扫描区域。

【讨论】：

“扫描区域”是否也限制了扫描功能？您似乎只提到了 UI。

【解决方案3】：

如何在<Camera> 和</Camera> 之间插入<View style='your style'/ >。

View 将是一个视口（通过 Camera 关注 View 标签）

<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，弹性：1 }, 预习： { 弹性：1 }, 按钮样式：{ 边距顶部：20，边距左：20， marginRight: 20, 边距底部：20， alignSelf：'中心' } } ```

【讨论】：