React Native 扫码功能开发指南

在 React Native 中实现扫码功能是许多移动应用的需求，以下是完整的开发指南，涵盖主流解决方案和最佳实践。

一、主流扫码解决方案

1. react-native-camera (已弃用)

npm install react-native-camera

曾经是主流选择，但已不再维护
支持二维码/条形码扫描
需要手动处理权限和相机控制

2. react-native-vision-camera (推荐)

npm install react-native-vision-camera
npm install vision-camera-code-scanner

当前最推荐的解决方案
高性能相机实现
支持实时二维码/条形码扫描
支持最新 React Native 版本

3. react-native-qrcode-scanner

npm install react-native-qrcode-scanner

简单易用的解决方案
适合基础扫码需求
基于 react-native-camera

二、使用 react-native-vision-camera 实现

1. 基本配置

首先安装依赖并配置原生端：

# iOS
cd ios && pod install

# Android
# 确保 minSdkVersion >= 21

2. 权限配置

Android (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.CAMERA" />

iOS (ios/项目名/Info.plist):

<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机以扫描二维码</string>

3. 基础实现代码

import { useCameraDevices, Camera } from 'react-native-vision-camera';
import { useScanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';

function QRScanner() {
  const [hasPermission, setHasPermission] = useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

  const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
    checkInverted: true,
  });

  useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission();
      setHasPermission(status === 'authorized');
    })();
  }, []);

  useEffect(() => {
    if (barcodes && barcodes.length > 0) {
      const scannedValue = barcodes[0].displayValue;
      console.log('扫描结果:', scannedValue);
      // 处理扫描结果
    }
  }, [barcodes]);

  if (!hasPermission) return <Text>请求相机权限...</Text>;
  if (!device) return <Text>加载相机...</Text>;

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}
      frameProcessorFps={5}
    />
  );
}

三、高级功能实现

1. 自定义扫码界面

return (
  <View style={{ flex: 1 }}>
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}
    />
    
    {/* 自定义扫码框 */}
    <View style={styles.overlay}>
      <View style={styles.border} />
      <Text style={styles.scanText}>将二维码放入框内扫描</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  border: {
    width: 250,
    height: 250,
    borderWidth: 2,
    borderColor: 'white',
    backgroundColor: 'transparent',
  },
  scanText: {
    color: 'white',
    marginTop: 20,
    fontSize: 16,
  },
});

2. 多格式支持

const [frameProcessor, barcodes] = useScanBarcodes([
  BarcodeFormat.QR_CODE,
  BarcodeFormat.EAN_13,
  BarcodeFormat.UPC_A,
  // 添加更多支持的格式
], {
  checkInverted: true,
});

3. 性能优化

<Camera
  // ...
  frameProcessorFps={3} // 降低帧率节省资源
  hdr={false} // 关闭HDR
  lowLightBoost={false} // 关闭低光增强
/>

四、常见问题解决

1. 权限问题

Android: 确保在 AndroidManifest.xml 中添加权限声明
iOS: 确保 Info.plist 中有相机权限描述
运行时检查权限状态并引导用户开启

2. 相机不显示

检查 device 是否成功获取
确保 isActive 设置为 true
检查相机是否被其他应用占用

3. 扫描不灵敏

调整 frameProcessorFps (3-5 是推荐值)
确保扫码区域光线充足
检查支持的格式是否正确

五、替代方案比较

方案	维护状态	性能	功能	易用性
react-native-vision-camera	活跃	高	丰富	中等
react-native-qrcode-scanner	一般	中等	基础	简单
react-native-camera	弃用	低	丰富	复杂

六、最佳实践

权限处理: 始终优雅地处理权限拒绝情况
结果去重: 避免短时间内重复扫描同一二维码
错误处理: 捕获并处理扫描过程中的错误
测试: 在不同设备和光线条件下测试
备用方案: 提供手动输入选项作为备用

通过以上指南，您可以在 React Native 应用中实现高效、可靠的扫码功能。根据项目需求选择合适的解决方案，并注意性能优化和用户体验。