反应 QR 读取器 
:rocket:反应QR Reader组件. 看看这个 演示。 。 。 .
目录
使用大小写
您需要从基于网页浏览器的应用程序中扫描 QR 代码的组件 .
兼容性
此组件已在以下浏览器中测试:
- Chrome Mac OS & Android 软件
- Firefox Mac OS和Android 游戏
- Safari Mac OS & IOS 游戏
既然这个库里有你需要的钩子 React >= 16.8.0。 。 。 .
安装
您可以通过国家防范机制或YARN安装此库.
国家预防机制
npm i @blackbox-vision/react-qr-reader
也门
yarn add @blackbox-vision/react-qr-reader
示例使用
在读取和完成之前的步骤后,您应该能够导入库并像这个例子那样使用:
import React, { useState } from 'react';
import { QrReader } from '@blackbox-vision/react-qr-reader';
const Test = (props) => {
const [data, setData] = useState('No result');
return (
<>
<QrReader
onResult={(result, error) => {
if (!!result) {
setData(result?.text);
}
if (!!error) {
console.info(error);
}
}}
style={{ width: '100%' }}
/>
<p>{data}</p>
</>
);
};
组件 API
这个 QrReader 组件有下列道具:
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 约束 | 介质跟踪约束 | { facingMode: 'user' } | 指定应该使用哪个相机(如果有的话) . |
| 报告 | function | 无 | 扫描事件处理器 |
| 视频 | string | video | 视频元素的ID |
| 扫描延迟 | number | 500 | QR 钩的扫描期 |
| 查看窗口 | 组件 | 无 | 查看Finder 组件以渲染视频元素 |
| 类Name | 字符串 | 无 | 容器元素的类名. |
| 容器样式 | 对象 | 无 | 容器元素的样式对象. |
| 视频相机Style | 对象 | 无 | 视频容器元素的样式对象 . |
| 视频Style | 对象 | 无 | 视频元素的样式对象 . |
浏览器支持
如果您需要支持旧浏览器, 请退出 本指南 如何使它与遗产相容
问题
请打开一个 问题 遵循其中一个问题模板。 我们将尽最大努力解决它们.
捐款
如果你想为这个项目捐款,请看 捐款 更多信息.
许可证
分发于 麻省理工学院许可证。见 自由主义 更多信息.