React,React Native中如何创建二维码

二维码代表“快速响应”代码,我们将看到如何在 React 网站或 React Native 手机应用 中创建 二维码,通过使用node包,React JS 网站和 React Native 的方法将是相同的。

React,React Native中如何创建二维码

二维码代表“快速响应”代码。它能够存储大量数据。虽然条形码水平展示信息,但QR码在水平和垂直方向上都这样做。当我们扫描QR码时,我们可以立即访问信息。在这里,我们将看到如何在 React 网站或 React Native 手机应用 中创建 二维码,通过使用node包,React JS 网站和 React Native 的方法将是相同的。

在 React 中创建 二维码

在这里,我们将使用 react-qr-code node包。它基本上是用于创建二维码的组件。这个库与 React 和 React Native 一起工作。

安装 – React 中的 二维码包

yarn add react-qr-code

当将此库与 React Native 一起使用时,您还需要安装 react-native-svg。

在 React 中使用 QRCode Component

现在,我们有组件。我们可以通过导入和传递一些属性来使用它。下面是一个用法示例。

import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));

我们还有一些属性,如bgColor,fgColor,level,size,title和value。实施后,您将获得如下图所示的结果。