Expo Barcode Scanner超出相机视图扫描问题及解决方法咨询

问题原因 #

• Expo Camera组件的onBarCodeScanned默认会扫描相机捕获的完整画面，而非仅屏幕上显示的预览区域。你设置的height:200只是控制预览的显示高度，相机实际捕获的画面范围远大于这个显示区域，因此条形码即使不在预览视图内，只要在相机的实际捕获范围内就会被识别。
• 代码存在笔误：conosole.log应为console.log，但该问题不影响扫描范围逻辑。
• 样式语法错误：styles.camera中的height:200;使用了分号，React Native样式对象需用逗号分隔属性。

解决办法 #

通过获取相机预览的实际布局边界，在扫描回调中判断条形码位置是否处于预览视图范围内，仅处理符合条件的扫描结果。

修改后的完整代码 #

import { Camera, CameraType } from 'expo-camera';
import { useState, useRef } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View, findNodeHandle, UIManager } from 'react-native';

export default function App() {
  const [type, setType] = useState(CameraType.back);
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const cameraRef = useRef(null);
  const [cameraBounds, setCameraBounds] = useState(null);

  // 获取相机组件在屏幕上的实时布局信息
  const getCameraBounds = () => {
    if (cameraRef.current) {
      const handle = findNodeHandle(cameraRef.current);
      UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
        setCameraBounds({ x: pageX, y: pageY, width, height });
      });
    }
  };

  if (!permission) {
    return <View />;
  }

  if (!permission.granted) {
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: 'center' }}>我们需要相机权限才能使用</Text>
        <Button onPress={requestPermission} title="授予权限" />
      </View>
    );
  }

  function toggleCameraType() {
    setType(current => (current === CameraType.back ? CameraType.front : CameraType.back));
  }

  const handleBarCodeScanned = ({ data, bounds }) => {
    if (!cameraBounds) return;

    // 转换条形码坐标到屏幕坐标系，判断是否完全在相机预览区域内
    const isInCameraView = 
      bounds.origin.x >= cameraBounds.x &&
      bounds.origin.y >= cameraBounds.y &&
      bounds.origin.x + bounds.size.width <= cameraBounds.x + cameraBounds.width &&
      bounds.origin.y + bounds.size.height <= cameraBounds.y + cameraBounds.height;

    if (isInCameraView) {
      console.log('条形码在视图内，扫描结果:', data);
      // 在此添加扫描成功后的业务逻辑
    } else {
      console.log('条形码在视图外，忽略扫描');
    }
  };

  return (
    <View style={styles.container}>
      <Camera 
        ref={cameraRef}
        style={styles.camera} 
        onBarCodeScanned={handleBarCodeScanned} 
        type={type}
        onLayout={getCameraBounds} // 布局变化时重新获取相机位置
      >
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={toggleCameraType}>
            <Text style={styles.text}>切换相机</Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  camera: {
    height: 200, // 修正语法错误：分号改为逗号
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'transparent',
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
});

关键说明 #

1. 通过useRef获取Camera组件实例，结合onLayout事件和UIManager.measure获取相机在屏幕上的精确位置与尺寸。
2. 在handleBarCodeScanned回调中，对比条形码的边界坐标与相机预览区域的坐标，仅当条形码完全处于预览区域内时才处理扫描结果。
3. 可根据需求调整判断逻辑，比如允许条形码部分重叠预览区域，只需修改isInCameraView的条件即可。

内容的提问来源于stack exchange，提问作者Vignesh Kumar