如何在非Expo环境下用TypeScript开发React Native条码扫描器？

推荐库：react-native-vision-camera #

这是目前非Expo环境下最靠谱的原生条码扫描库，完全支持TypeScript，基于CameraX（Android）和AVFoundation（iOS）开发，性能稳定，支持QR码、Code 128、EAN-13等绝大多数主流条码格式。

安装与配置 #

1. 安装核心库

npm install react-native-vision-camera
# 或
yarn add react-native-vision-camera

2. 安装条码扫描插件

npm install vision-camera-code-scanner
# 或
yarn add vision-camera-code-scanner

3. 原生端配置

• Android：
  在android/app/src/main/AndroidManifest.xml中添加相机权限：

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

  确保android/build.gradle中最低SDK版本不低于21：

  minSdkVersion = 21
  

• iOS：
  在ios/[你的项目名]/Info.plist中添加相机权限描述：

  <key>NSCameraUsageDescription</key>
  <string>需要访问相机进行条码扫描</string>
  

  运行命令更新依赖：

  cd ios && pod install && cd ..
  

TypeScript 示例组件 #

创建BarcodeScanner.tsx：

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Alert } from 'react-native';
import { Camera, useCameraDevices, CameraPermissionStatus } from 'react-native-vision-camera';
import { scanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';

const BarcodeScanner = () => {
  const [permissionStatus, setPermissionStatus] = useState<CameraPermissionStatus>('not-determined');
  const devices = useCameraDevices();
  const backCamera = devices.back;

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

  const handleScanResult = (barcodes: any[]) => {
    if (barcodes.length > 0) {
      const codeContent = barcodes[0].displayValue;
      Alert.alert('扫描完成', `条码内容：${codeContent}`);
      // 这里可添加后续逻辑，比如跳转页面、提交数据等
    }
  };

  if (permissionStatus !== 'authorized') {
    return (
      <View style={styles.container}>
        <Text>需要相机权限才能使用扫描功能</Text>
      </View>
    );
  }

  if (!backCamera) {
    return (
      <View style={styles.container}>
        <Text>未检测到可用后置相机</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={backCamera}
        isActive={true}
        frameProcessor={frame => scanBarcodes(frame, [BarcodeFormat.QR_CODE, BarcodeFormat.CODE_128])}
        frameProcessorFps={5}
        onFrameProcessorResult={handleScanResult}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
});

export default BarcodeScanner;

注意事项 #

• 确保React Native版本在0.68以上，避免兼容性问题
• Android端若遇编译错误，可参考库官方文档的故障排查部分调整android/settings.gradle配置
• iOS端需在Xcode中确认相机权限已正确配置，否则应用会崩溃
• frameProcessorFps可按需调整：数值越高扫描灵敏度越高，但功耗也会增加

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