# @blackbox-vision/react-qr-reader 中文文档

规范地址：https://npmcn.com/package/%40blackbox-vision/react-qr-reader/

版本：5\.0\.0
npm 元数据更新时间：2022-04-04T19:19:54.846Z
中文译文更新时间：2026-11-08T05:45:51.887Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40blackbox-vision/react-qr-reader
原文对照：https://npmcn.com/package/%40blackbox-vision/react-qr-reader/?lang=original
项目主页：https://github.com/BlackBoxVision/react-qr-reader#readme
源码仓库：https://github.com/BlackBoxVision/react-qr-reader

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：37.2 kB，19 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0，react-dom ^16\.8\.0 \|\| ^17\.0\.0
- 首次发布：2020-03-22T02:32:48.566Z
- 最新版本发布：2021-08-05T10:13:41.255Z
- 近 30 天下载量：4382（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 0 个）

## 中文简介

从 Web相机读取 QR 代码的回放组件

## 安装

```sh
npm install @blackbox-vision/react-qr-reader
```

也可以使用：`pnpm add @blackbox-vision/react-qr-reader`、`yarn add @blackbox-vision/react-qr-reader`、`bun add @blackbox-vision/react-qr-reader`

## README

![Lib logo](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/qr-reader-logo.png)

# 反应 QR 读取器 [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Freact-qr-reader.svg)](https://badge.fury.io/js/%40blackbox-vision%2Freact-qr-reader) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/blackboxvision/react-qr-reader/badge.svg)](https://snyk.io/test/github/blackboxvision/react-qr-reader)

:rocket:反应QR Reader组件. 看看这个 [演示](https://blackboxvision.github.io/react-qr-reader)。 。 。 .

## 目录

-   [使用大小写](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-use-case)
-   [兼容性](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-compatibility)
-   [安装](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-installation)
    -   [国家预防机制](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-npm)
    -   [也门](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-yarn)
-   [示例使用](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-example-usage)
-   [QrReader API 编辑器](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-component-api)
-   [浏览器支持](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-browser-support)
-   [问题](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-issues)
-   [捐款](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-contributing)
-   [许可证](https://npmcn.com/package/%40blackbox-vision/react-qr-reader/#readme-license)

## 使用大小写

您需要从基于网页浏览器的应用程序中扫描 QR 代码的组件 .

## 兼容性

此组件已在以下浏览器中测试:

-   Chrome Mac OS & Android 软件
-   Firefox Mac OS和Android 游戏
-   Safari Mac OS & IOS 游戏

既然这个库里有你需要的钩子 `React >= 16.8.0`。 。 。 .

## 安装

您可以通过国家防范机制或YARN安装此库.

### 国家预防机制

```bash
npm i @blackbox-vision/react-qr-reader
```

### 也门

```bash
yarn add @blackbox-vision/react-qr-reader
```

## 示例使用

在读取和完成之前的步骤后,您应该能够导入库并像这个例子那样使用:

```javascript
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` 组件有下列道具:

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| 约束 | [介质跟踪约束](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) | `{ facingMode: 'user' }` | 指定应该使用哪个相机(如果有的话) . |
| 报告 | `function` | 无 | 扫描事件处理器 |
| 视频 | `string` | `video` | 视频元素的ID |
| 扫描延迟 | `number` | `500` | QR 钩的扫描期 |
| 查看窗口 | 组件 | 无 | 查看Finder 组件以渲染视频元素 |
| 类Name | 字符串 | 无 | 容器元素的类名. |
| 容器样式 | 对象 | 无 | 容器元素的样式对象. |
| 视频相机Style | 对象 | 无 | 视频容器元素的样式对象 . |
| 视频Style | 对象 | 无 | 视频元素的样式对象 . |

## 浏览器支持

如果您需要支持旧浏览器, 请退出 [本指南](https://github.com/zxing-js/library#browser-support) 如何使它与遗产相容

## 问题

请打开一个 [问题](https://github.com/BlackBoxVision/react-qr-reader/issues) 遵循其中一个问题模板。 我们将尽最大努力解决它们.

## 捐款

如果你想为这个项目捐款,请看 [捐款](https://github.com/BlackBoxVision/react-qr-reader/blob/master/CONTRIBUTING.md) 更多信息.

## 许可证

分发于 **麻省理工学院许可证**。见 [自由主义](https://github.com/BlackBoxVision/react-qr-reader/blob/master/LICENSE) 更多信息.

## 常见问题

### @blackbox-vision/react-qr-reader 是什么？

从 Web相机读取 QR 代码的回放组件

### 如何安装 @blackbox-vision/react-qr-reader？

在项目目录运行 npm install @blackbox-vision/react-qr-reader，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.0 \|\| ^17\.0\.0）、react-dom（^16\.8\.0 \|\| ^17\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @blackbox-vision/react-qr-reader 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @blackbox-vision/react-qr-reader 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @blackbox-vision/react-qr-reader 可以商用吗？

@blackbox-vision/react-qr-reader 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @blackbox-vision/react-qr-reader 的下载量有多少？

根据 npm 官方下载统计，@blackbox-vision/react-qr-reader 在 2026/10/09 – 2026/11/07 这 30 天内被下载 4,382 次，日均约 146 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @blackbox-vision/react-qr-reader 还在维护吗？

最新版本 5\.0\.0 发布于 2021/08/05（5 年前）；至今共发布 31 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/03/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。