react中二维码生成

Posted 2023-01-13 web_pzj

参考文档:

https://blog.csdn.net/weixin_45022563/article/details/124843593

 

awesomeqr/react

案例：

注意需要给父级div设置高宽

下载：

yarn add @awesomeqr/react

# OR using npm

npm install --save @awesomeqr/react

import React from \'react\'
import  AwesomeQRCode  from "@awesomeqr/react";//引入二维码生成库

export default function CollectApp() 
    return (
        <div style= "height": "400px", "width": "100%" >
            线上采集app下载2
            <AwesomeQRCode
                options=
                    text: "测试测试测试，这的app下载内容,测试测试测试，这的app下载内容这的app下载内容测试测试测试，这的app下载内容",//二维码内容
                    // size: 100,//大小
                    logoImage: require("../../../../media/picture/jfjyewm.png"),//二维码中间的图片
                    logoScale: 0.3, // 二维码中间logo大小
                    logoCornerRadius: 0.3, // 二维码中间logo圆角
                    // colorLight: "rgba(159,255,255,0)", // 二维码背景颜色
                
                onStateChange=(state) => 
                    switch (state) 
                        case "working":
                            //工作 ...
                            break;
                        case "idle":
                            // 闲置...
                            break;
                    
                
            />
        </div>
    )