为Ionic React 7项目构建Capacitor二维码扫描器遇阻求助

核心方案：使用Capacitor官方条码扫描插件 #

官方维护的@capacitor/barcode-scanner完全适配Ionic React 7 + Capacitor 5，能满足相机预览、二维码识别、结果展示的需求，具体步骤如下：

1. 安装插件

在项目根目录执行命令：

npm install @capacitor/barcode-scanner
npx cap sync

2. 配置原生权限

• iOS：打开ios/App/App/Info.plist，添加相机权限描述：

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

• Android：打开android/app/src/main/AndroidManifest.xml，添加相机权限：

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

3. React组件实现代码

创建扫描组件，集成扫描触发、结果弹窗逻辑：

import { useState } from 'react';
import { IonButton, IonAlert, IonContent, IonPage } from '@ionic/react';
import { BarcodeScanner } from '@capacitor/barcode-scanner';

const QrScannerPage = () => {
  const [showAlert, setShowAlert] = useState(false);
  const [scanResult, setScanResult] = useState('');

  const startScan = async () => {
    try {
      // 请求相机权限
      const permission = await BarcodeScanner.checkPermissions();
      if (permission.camera !== 'granted') {
        const result = await BarcodeScanner.requestPermissions();
        if (result.camera !== 'granted') {
          alert('需要授予相机权限才能扫描');
          return;
        }
      }

      // 启动扫描
      const { hasContent, content } = await BarcodeScanner.startScan();
      
      if (hasContent && content) {
        setScanResult(content);
        setShowAlert(true);
      }
    } catch (error) {
      console.error('扫描出错:', error);
      alert('扫描失败，请重试');
    }
  };

  return (
    <IonPage>
      <IonContent className="ion-padding">
        <IonButton expand="block" onClick={startScan}>
          开始扫描二维码
        </IonButton>

        <IonAlert
          isOpen={showAlert}
          header="扫描结果"
          message={scanResult}
          buttons={[
            {
              text: '关闭',
              handler: () => setShowAlert(false)
            },
            {
              text: '打开链接',
              handler: () => {
                if (scanResult.startsWith('http')) {
                  window.open(scanResult, '_blank');
                }
                setShowAlert(false);
              }
            }
          ]}
        />
      </IonContent>
    </IonPage>
  );
};

export default QrScannerPage;

关键说明

• 扫描时插件会自动打开全屏相机预览，识别到二维码后自动返回结果，无需手动处理相机流
• 弹窗内置"打开链接"按钮，若扫描结果为URL可直接跳转
• 之前第三方库失效大概率是版本不兼容问题，官方插件同步Capacitor和Ionic版本更新，稳定性有保障

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