升级Expo SDK 51后expo-camera二维码扫描器仍无法对焦，求解决方案

我使用expo-camera的CameraView组件实现二维码扫描，多数场景表现正常，但在小屏手机或扫描小纸张上的二维码时，无法像原生相机那样触发微距对焦（如iPhone的微距模式）。升级至SDK 51后问题仍与SDK 50一致，点击屏幕对焦功能也无效。

当前CameraView配置代码：

<CameraView
  enableTorch={flashlight}
  style={$fullScreen}
  facing="back"
  barcodeScannerSettings={{
    barcodeTypes: ['qr'],
  }}
  onBarcodeScanned={handleBarCodeScanned}
>

原生相机对焦效果：

Expo Go开发模式下相机对焦效果：

解决方案 #

1. 显式配置对焦模式 #

Expo Camera默认对焦模式可能未启用微距检测，尝试手动设置持续自动对焦模式：

<CameraView
  enableTorch={flashlight}
  style={$fullScreen}
  facing="back"
  focusMode="continuous-auto" // 启用持续自动对焦，适配微距场景
  barcodeScannerSettings={{
    barcodeTypes: ['qr'],
  }}
  onBarcodeScanned={handleBarCodeScanned}
>

2. 修复点击屏幕对焦功能 #

通过focusPointOfInterest结合触摸事件实现精准手动对焦，补充以下逻辑：

import { useRef, useState } from 'react';
import { TouchableOpacity } from 'react-native';

const QRScanner = () => {
  const [focusPoint, setFocusPoint] = useState(null);

  const handleTouch = (event) => {
    const { width, height } = event.nativeEvent.layout;
    const { pageX, pageY } = event.nativeEvent;
    // 转换为相机坐标系的归一化坐标（0-1范围）
    const x = pageX / width;
    const y = pageY / height;
    setFocusPoint({ x, y });
  };

  return (
    <TouchableOpacity style={$fullScreen} onPress={handleTouch} activeOpacity={1}>
      <CameraView
        enableTorch={flashlight}
        style={$fullScreen}
        facing="back"
        focusMode="manual"
        focusPointOfInterest={focusPoint}
        barcodeScannerSettings={{
          barcodeTypes: ['qr'],
        }}
        onBarcodeScanned={handleBarCodeScanned}
      />
    </TouchableOpacity>
  );
};

3. 确认相机权限配置 #

确保app.json中已正确声明相机权限，部分iOS设备需额外配置：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要访问相机进行二维码扫描"
      }
    },
    "android": {
      "permissions": ["CAMERA"]
    }
  }
}

4. 测试生产构建版本 #

Expo Go开发模式存在功能限制，尝试生成生产包测试：

eas build --profile preview --platform ios

5. 调整expo-camera版本 #

若SDK 51版本仍有问题，可尝试锁定稳定版本或降级：

# 安装SDK 50对应稳定版本
npm install expo-camera@15.0.1

6. 尝试社区替代方案 #

如果以上方法无效，可考虑使用原生社区库，如react-native-qrcode-scanner（需原生配置）。

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