Question

我正在使用来自react-native-camera的条形码扫描仪，目前如果我使用它并且有多个QR码密切相互叠加，我将我的相机指向一个并且它读取它上面的代码，这是屏幕外显示但在摄像机视图内。然而，如果在我要扫描的那个上面没有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",

Answer 1

现在，您可以使用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: frameHeight,
                        height: frameWidth,
                        borderWidth: 2,
                        borderColor: 'red',
                        opacity: 0.5,
                        }}
                    />
                </RNCamera>
            </View>
        );
    }
}

Answer 2

如何在<View style='your style'/ >和<Camera>之间插入</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 = { 容器： { 身高：300， flex：1 }，预习： { flex：1 }， buttonStyle：{ marginTop：20， marginLeft：20， marginRight：20， marginBottom：20， alignSelf：＆＃39; center＆＃39; } } ```

Answer 3

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

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

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

3 个答案: