您可以使用react-qr-code庫為網站url“https://www.npmjs.com/package/react-qr-code”創建二維碼。該庫提供了一種在 react 應用程序中生成 qr 碼的簡單有效的方法。使用方法如下：
安裝：
首先，在項目目錄中運行以下命令來安裝react-qr-code包：
npm i react-qr-code
登錄后復制
如果您使用react native，您還需要安裝react-native-svg。奔跑：
npm i react-native-svg cd ios && pod install
登錄后復制
用法：
從庫中導入qrcode組件：
import react from "react";
import qrcode from "react-qr-code";
// render the qr code with a specific value (e.g., a url)
reactdom.render(<qrcode value="https://www.npmjs.com/package/react-qr-code" />, document.getelementbyid("container"));
登錄后復制
注意：如果二維碼很可能出現在深色物體旁邊，請將其包裹在淺色容器中，以保留“安靜區域”：
<div style={{ background: "white", padding: "16px" }}>
<qrcode value="https://www.npmjs.com/package/react-qr-code" />
</div>
登錄后復制
響應式二維碼示例:
您可以根據需要調整二維碼大小和樣式。例如：
<div style={{ height: "auto", margin: "0 auto", maxWidth: 64, width: "100%" }}>
<QRCode
size={256}
style={{ height: "auto", maxWidth: "100%", width: "100%" }}
value="https://www.npmjs.com/package/react-qr-code"
viewBox="0 0 256 256"
/>
</div>
登錄后復制
api 道具:
您可以使用以下道具自定義二維碼：
bgcolor：背景顏色（默認：“#ffffff”）
fgcolor：前景色（默認值：“#000000”）
level：糾錯級別（“l”、“m”、“q”或“h”）
size：二維碼大小（默認：256）
標題：可選標題
value：要編碼的 url 或文本
記得將“https://www.npmjs.com/package/react-qr-code”替換為您想要的 url。
