如何在Ionic React项目中添加闪光灯功能适配条码扫描应用

你之前遇到的cordova插件依赖angular/core的问题，是因为你误装了针对Angular适配的Ionic Native包装版本，原生的cordova闪光灯插件本身不依赖任何前端框架，直接在Ionic React环境下调用全局暴露的API即可，具体实现步骤如下：

第一步：安装正确依赖 #

• 不要安装带/ngx后缀的Angular适配包，直接安装原生Cordova插件：
  cordova plugin add cordova-plugin-flashlight
• Ionic React下无需额外的框架适配层，插件安装后会直接在全局window对象下暴露调用入口

第二步：补充类型声明（TS项目适用） #

如果你的项目使用TypeScript开发，可以在全局类型声明文件中添加以下内容，避免类型报错：

declare interface Window {
  plugins: {
    flashlight: {
      available: (callback: (available: boolean) => void) => void;
      switchOn: () => void;
      switchOff: () => void;
      toggle: () => void;
    }
  }
}

第三步：组件内调用示例 #

在你的条码扫描页面直接封装闪光灯逻辑即可，参考代码如下：

import { useEffect, useState } from 'react';
import { IonButton, IonIcon } from '@ionic/react';
import { flash, flashOff } from 'ionicons/icons';

const ScanPage = () => {
  const [isFlashOn, setIsFlashOn] = useState(false);

  const toggleFlash = () => {
    // 先校验设备是否支持闪光灯
    window.plugins.flashlight.available((available) => {
      if (!available) {
        alert('当前设备不支持闪光灯功能');
        return;
      }
      if (isFlashOn) {
        window.plugins.flashlight.switchOff();
        setIsFlashOn(false);
      } else {
        window.plugins.flashlight.switchOn();
        setIsFlashOn(true);
      }
    })
  }

  // 页面销毁时自动关闭闪光灯，避免后台常驻
  useEffect(() => {
    return () => {
      window.plugins.flashlight?.available((available) => {
        if (available && isFlashOn) {
          window.plugins.flashlight.switchOff();
        }
      })
    }
  }, [isFlashOn])

  return (
    <div>
      {/* 此处放置你的条码扫描逻辑代码 */}
      <IonButton onClick={toggleFlash}>
        <IonIcon icon={isFlashOn ? flashOff : flash} slot="start" />
        {isFlashOn ? '关闭闪光灯' : '开启闪光灯'}
      </IonButton>
    </div>
  )
}

export default ScanPage;

注意事项 #

• 该功能仅能在真机打包后验证，浏览器端调试时无法调用硬件闪光灯
• Android平台需要提前申请相机权限，iOS平台需要在Info.plist中添加相机权限的用途描述
• 如果你使用Capacitor作为运行时，可直接使用@capacitor/torch插件，该插件无框架适配要求，直接调用官方API即可，不存在React和Angular的使用差异

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