React Native Vision Camera v4.1.0 iOS端坐标映射与扫描区域问题

一、坐标映射逻辑修正（iOS适配） #

iOS与Android的相机帧坐标系存在核心差异：iOS相机传感器默认是横向排布，而Android会自动适配屏幕方向，直接复用Android的坐标转换逻辑会导致宽高错位、坐标偏移。针对平台做差异化处理即可解决：

1. 引入Platform模块，解析条码帧时区分平台处理：

import { Platform } from 'react-native';

// ... 原有代码

const codeScanner: CodeScanner = {
  codeTypes: ["ean-13"],
  onCodeScanned: (codes, frame) => {
    setScanFrame(frame);
    setCodeScannerHighlights(
      codes.map((code) => {
        let x, y, width, height;
        if (Platform.OS === 'ios') {
          // iOS下将横向传感器坐标系转换为竖屏屏幕坐标系
          x = code.frame?.x ?? 0;
          y = code.frame?.y ?? 0;
          width = code.frame?.width ?? 0;
          height = code.frame?.height ?? 0;
          // 交换宽高，并调整x轴坐标（抵消横向传感器的镜像偏移）
          [x, y] = [y, frame.width - x - width];
          [width, height] = [height, width];
        } else {
          // 保留Android原有适配逻辑
          x = code.frame?.y ?? 0;
          y = code.frame?.x ?? 0;
          width = code.frame?.height ?? 0;
          height = code.frame?.width ?? 0;
        }
        return { x, y, width, height };
      })
    );
  },
};

2. 统一HighlightBox的缩放逻辑，避免宽高比例失调：

const HightlightBox = ({ highlight, layout, scanFrame }): JSX.Element => {
  // 取最小缩放比例，保证条码框不变形
  const scale = Math.min(layout.width / scanFrame.width, layout.height / scanFrame.height);

  return (
    <View
      style={[
        {
          position: "absolute",
          borderWidth: 2,
          borderColor: "red",
        },
        {
          left: highlight.x * scale,
          top: highlight.y * scale,
          width: highlight.width * scale,
          height: highlight.height * scale,
        },
      ]}
    />
  );
};

二、限制扫描区域（替代方案） #

如果坐标映射仍有适配问题，可以通过scanRegion参数锁定扫描范围，既简化坐标转换，也能提升扫描效率：

1. 计算屏幕中心的扫描区域（以300x300的框为例）：

const [scanRegion, setScanRegion] = useState<Region | undefined>(undefined);

const onLayout = (evt: LayoutChangeEvent) => {
  const { width, height } = evt.nativeEvent.layout;
  setLayout(evt.nativeEvent.layout);
  // 计算屏幕中心的扫描区域坐标
  const scanWidth = 300;
  const scanHeight = 300;
  setScanRegion({
    x: (width - scanWidth) / 2,
    y: (height - scanHeight) / 2,
    width: scanWidth,
    height: scanHeight,
  });
};

2. 将扫描区域传入codeScanner，并简化坐标映射：

const codeScanner: CodeScanner = {
  codeTypes: ["ean-13"],
  scanRegion: scanRegion, // 绑定扫描区域
  onCodeScanned: (codes) => {
    // 此时条码坐标基于scanRegion，直接复用即可
    setCodeScannerHighlights(
      codes.map((code) => ({
        x: code.frame?.x ?? 0,
        y: code.frame?.y ?? 0,
        width: code.frame?.width ?? 0,
        height: code.frame?.height ?? 0,
      }))
    );
  },
};

3. 调整HighlightBox的位置计算：

const HightlightBox = ({ highlight, scanRegion }): JSX.Element => {
  return (
    <View
      style={[
        {
          position: "absolute",
          borderWidth: 2,
          borderColor: "red",
        },
        {
          left: scanRegion.x + highlight.x,
          top: scanRegion.y + highlight.y,
          width: highlight.width,
          height: highlight.height,
        },
      ]}
    />
  );
};

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