如何在React Native中集成Zebra T53/T58手机的2D图像扫描器

针对你的需求，推荐两种落地思路，均基于Zebra安卓设备的原生能力，适配React Native 0.71.11版本：

思路一：通过DataWedge广播接收扫描结果（快速集成） #

Zebra设备自带的DataWedge工具可直接配置扫描器行为，无需复杂原生开发，适合快速对接：

• 配置DataWedge：在Zebra设备上打开DataWedge应用，创建新Profile，指定你的RN应用包名，设置扫描成功后发送自定义Intent广播（比如Action设为com.your.app.SCAN_RESULT），并配置条码数据的Extra字段（如barcode）。
• 原生层注册广播接收器：在RN项目的Android模块中编写简单的BroadcastReceiver，收到DataWedge的广播后，通过DeviceEventManagerModule把扫描数据发送到RN JS层。
• RN层监听事件：使用NativeEventEmitter监听原生发送的扫描事件，处理条码数据：

  import { NativeEventEmitter, NativeModules, useEffect } from 'react-native';
  
  // 假设原生模块名为ZebraScanModule
  const scanEmitter = new NativeEventEmitter(NativeModules.ZebraScanModule);
  
  useEffect(() => {
    const subscription = scanEmitter.addListener('BarcodeScanned', (data) => {
      console.log('扫描到的条码:', data.barcode);
      // 替换成你的业务逻辑
    });
  
    return () => subscription.remove();
  }, []);
  

思路二：封装Zebra Scanner SDK为RN原生模块（灵活可控） #

如果需要精细控制扫描器（比如主动启停、设置扫描参数），可直接集成Zebra官方Scanner SDK：

• 导入SDK：下载Zebra Scanner SDK for Android，将aar包添加到RN项目的Android模块依赖中（在app/build.gradle的dependencies里添加implementation files('libs/ScannerSDK.aar')）。
• 编写原生模块：创建继承自ReactContextBaseJavaModule的类，封装SDK的扫描方法和回调：

  import com.facebook.react.bridge.ReactApplicationContext;
  import com.facebook.react.bridge.ReactContextBaseJavaModule;
  import com.facebook.react.bridge.ReactMethod;
  import com.facebook.react.modules.core.DeviceEventManagerModule;
  import com.zebra.scannercontrol.DCSScannerInfo;
  import com.zebra.scannercontrol.IDscannerEventsListener;
  
  public class ZebraScannerModule extends ReactContextBaseJavaModule implements IDscannerEventsListener {
      private com.zebra.scannercontrol.Scanner scanner;
  
      public ZebraScannerModule(ReactApplicationContext reactContext) {
          super(reactContext);
          scanner = com.zebra.scannercontrol.ScannerFactory.getScanner(reactContext);
          scanner.registerScannerEventsListener(this);
      }
  
      @ReactMethod
      public void startScan() {
          if (scanner != null) {
              scanner.startScan();
          }
      }
  
      @ReactMethod
      public void stopScan() {
          if (scanner != null) {
              scanner.stopScan();
          }
      }
  
      @Override
      public void onScanComplete(DCSScannerInfo scannerInfo, byte[] barcodeData, int barcodeType) {
          String barcode = new String(barcodeData);
          getReactApplicationContext()
              .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
              .emit("BarcodeScanned", barcode);
      }
  
      @Override
      public String getName() {
          return "ZebraScannerModule";
      }
  
      // 实现其他必要的接口方法（如onScannerDisconnected等）
  }
  

• 注册模块：在MainApplication.java中注册这个原生模块，确保RN能调用到。
• RN层调用：直接调用原生模块的方法控制扫描器，并监听结果：

  import { NativeModules, NativeEventEmitter, useEffect } from 'react-native';
  const { ZebraScannerModule } = NativeModules;
  const scanEmitter = new NativeEventEmitter(ZebraScannerModule);
  
  // 启动扫描
  const handleStartScan = () => {
    ZebraScannerModule.startScan();
  };
  
  useEffect(() => {
    const subscription = scanEmitter.addListener('BarcodeScanned', (barcode) => {
      console.log('扫描结果:', barcode);
      // 处理业务逻辑
      ZebraScannerModule.stopScan(); // 可选：扫描成功后停止
    });
  
    return () => {
      ZebraScannerModule.stopScan();
      subscription.remove();
    };
  }, []);
  

关键注意事项 #

• 权限配置：在AndroidManifest.xml中添加必要权限，比如<uses-permission android:name="android.permission.CAMERA" />、<uses-permission android:name="android.permission.BLUETOOTH" />（若SDK需要）。
• 设备兼容性：仅在Zebra T53/T58真机上测试，模拟器无法模拟内置扫描器。
• 现有功能兼容：可通过检测设备型号切换扫描方式：

  import { Platform } from 'react-native';
  const isZebraDevice = Platform.OS === 'android' && /T53|T58/.test(Platform.Model);
  // 若是Zebra设备则使用内置扫描器，否则用原摄像头扫码
  

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