基于React Native CLI开发支持商品条码的非QR码线性条形码扫描器需求

一、依赖选择与安装 #

选用react-native-vision-camera搭配vision-camera-code-scanner插件实现，这两个库支持精准配置条码扫描格式，性能稳定且适配React Native CLI项目。

执行以下命令安装依赖：

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

iOS项目需执行pod安装：

npx pod-install ios

二、权限配置 #

iOS #

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

<key>NSCameraUsageDescription</key>
<string>需要相机权限进行条形码扫描</string>

Android #

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

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

三、核心代码实现 #

实现仅扫描线性条形码、支持「指定条码扫描」和「任意条码扫描」切换的功能：

import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';
import { Camera, useCameraPermissions } from 'react-native-vision-camera';
import { CodeScanner, CodeScannerFrame } from 'vision-camera-code-scanner';

const BarcodeScanner = () => {
  const [hasPermission, setHasPermission] = useState(false);
  const [scanningMode, setScanningMode] = useState('any'); // 'any' 或 'specific'
  const [targetBarcode, setTargetBarcode] = useState('');
  const [scannedResult, setScannedResult] = useState('');

  const { permission, requestPermission } = useCameraPermissions();

  useEffect(() => {
    const getPermission = async () => {
      const res = await requestPermission();
      setHasPermission(res === 'granted');
    };
    if (permission === 'not-determined') getPermission();
    else setHasPermission(permission === 'granted');
  }, [permission]);

  // 仅配置线性条形码格式，排除所有二维码类型
  const scanFormats = [
    'CODE_128',
    'EAN_13',
    'EAN_8',
    'UPC_A',
    'UPC_E',
    'CODE_39',
    'ITF',
  ];

  const handleScan = ({ codes }) => {
    const scannedCode = codes[0]?.value;
    if (!scannedCode) return;

    if (scanningMode === 'specific') {
      setScannedResult(
        scannedCode === targetBarcode 
          ? `匹配成功：${scannedCode}` 
          : `不匹配目标条码：${scannedCode}`
      );
    } else {
      setScannedResult(`扫描到条码：${scannedCode}`);
    }
  };

  if (!hasPermission) {
    return <Text>请授予相机权限</Text>;
  }

  return (
    <View style={styles.container}>
      <View style={styles.modeSelector}>
        <Button
          title="任意条码扫描"
          onPress={() => setScanningMode('any')}
          color={scanningMode === 'any' ? '#2196F3' : '#999'}
        />
        <Button
          title="指定条码扫描"
          onPress={() => setScanningMode('specific')}
          color={scanningMode === 'specific' ? '#2196F3' : '#999'}
        />
      </View>

      {scanningMode === 'specific' && (
        <TextInput
          style={styles.input}
          placeholder="输入目标条码"
          value={targetBarcode}
          onChangeText={setTargetBarcode}
          keyboardType="numeric"
        />
      )}

      <Text style={styles.result}>{scannedResult}</Text>

      <Camera style={styles.camera} device={Camera.getCameraById('back')} isActive={true}>
        <CodeScanner
          codeTypes={scanFormats}
          onCodeScanned={handleScan}
        />
        <CodeScannerFrame style={styles.frame} />
      </Camera>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  modeSelector: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
    backgroundColor: '#fff',
  },
  input: {
    backgroundColor: '#fff',
    padding: 10,
    margin: 10,
    borderRadius: 5,
  },
  result: {
    backgroundColor: 'rgba(255,255,255,0.8)',
    padding: 10,
    textAlign: 'center',
    fontSize: 16,
  },
  camera: {
    flex: 1,
  },
  frame: {
    borderColor: '#2196F3',
    borderWidth: 2,
    borderRadius: 8,
  },
});

export default BarcodeScanner;

四、关键说明 #

• 仅线性条码扫描：通过codeTypes严格配置线性条码格式，完全排除二维码类型（如QR_CODE），确保不会识别QR码。
• 双模式切换：通过scanningMode状态切换扫描逻辑，「指定条码扫描」会自动对比扫描结果与用户输入的目标值，「任意条码扫描」直接返回扫描内容。
• 原生性能：基于原生相机实现的扫描逻辑，识别速度快，适配iOS和Android双平台。

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