快速入门 – React Barcode Scanner

快速开始

import React from 'react'
import { BarcodeScanner } from 'react-barcode-scanner'
import 'react-barcode-scanner/polyfill'
 
export default () => {
  return (
    <BarcodeScanner />
  )
}

条形码格式

BarcodeScanner 默认配置支持 qr_code, 若需要支持其他的条码格式, 需要配置formats字段:

<BarcodeScanner options={{ formats: ['code_128'] }} />

⚠️

项目基于Barcode Detection API, 支持除aztec, data_matrix和pdf417(zbar polyfill目前未支持)外的Barcode Formats (opens in a new tab)

扫码感应延迟

BarcodeScanner为了性能考虑, 默认设置成了1000ms识别一次, 若需要更灵敏的扫码感应, 需要配置delay字段:

<BarcodeScanner options={{ delay: 500 }} />

闪光灯

为考虑更多场景, BarcodeScanner 抽象出了 useTorch Hook方便用户使用

import React from 'react'
import { BarcodeScanner, useTorch } from 'react-barcode-scanner'
 
export default () => {
  const [isSupportTorch, isOpen, onTorchSwitch] = useTorch()
 
  return (
    <div style={{ width: '100%', height: '360px' }}>
      <BarcodeScanner />
      {isSupportTorch
        ? <button onClick={onTorchSwitch}>切换闪关灯</button>
        : null}
    </div>
  )
}

闪光灯目前只在部分浏览器可用, 具体参考: MediaTrackConstraints (opens in a new tab)

与框架使用

Next.js

React Barcode Scanner 是一款基于浏览器功能的扫码库, 只适用于浏览器环境, 若需要在Next.js项目中应用此库, 需要以next/dynamic的方式导入

import dynamic from 'next/dynamic'
 
const BarcodeScanner = dynamic(() => {
  import('react-barcode-scanner/polyfill')
  return import('react-barcode-scanner').then(mod => mod.BarcodeScanner)
}, { ssr: false })

安装 API