解决React使用qrcode.react生成二维码添加logo

前言：使用qrcode.react之后并且添加了公司的logo通过手机扫描无法每次都成功识别二维码，原因分析为logo与整个二维码占比过大导致无法识别出该二维码。先介绍使用方法

1. 安装依赖

npm install qrcode.react

2. 在需要用的地方引入

import {QRCodeCanvas} from 'qrcode.react';

3. 使用（列举98%常用属性）

<QRCodeSVG
  size={100} // 二维码大小 默认值128 类型为number
  includeMargin // 二维码边缘是否需要留白 默认值false 类型为boolean
  level="H" // 二维码安全等级 默认值L 类型为string 一共有 L M Q H 四种值安全等级由低到高 安全等级越高生成的二维码越密集
  value={MOBILE_URL} // 扫描二维码出现的值可以是链接也可以是文字
  imageSettings={{ // 配置二维码中间出现的logo信息
    src: ‘’, // logo的地址 可以是在线图片也可以是本地图片 没有默认值 类型为string
    width: 18, // logo的宽度 默认值是整个二维码的10% 类型为number
    height: 18, // logo的高度 默认值是整个二维码的10% 类型为number
    excavate: true, // 是否是镂空状态 默认值false 类型为boolean
  }}
/>

如何解决：经过几次尝试证明猜想是正确的，就是因为logo与整个二维码的占比过大导致无法试别二维码解决思路就是将logo通过width和heght属性将logo与整个二维码的占比调小即可

解决方案一： 将level调至最高级别H

解决方案二： 通过将width和height调整小一点直到可以正常扫描出来

解决方案三： 如果就是想要logo稍微大一点的可以通过结合方案一和方案二，这个时候只需要轻微调整方案二即可

生活就是不断的积累 奥力给