react native 生成二维码
1. 安装
npm i -S react-native-svg react-native-qrcode-svg
2. 引入使用
默认用法
import QRCode from 'react-native-qrcode-svg';
// 不带logo
render() {
return (
<QRCode
value="http://awesome.link.qr"
size={200}
/>
);
};
添加logo
render() {
let base64Logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAA..';
return (
<QRCode
value="Just some string value"
logo={{uri: base64Logo}}
logoSize={30}
logoBackgroundColor='transparent'
/>
);
};
参数配置
| 参数名 | 默认值 | 描述 |
|---|---|---|
| size | 100 | 渲染图像的大小（以像素为单位） |
| value | 'this is a QR code' | 二维码的字符串值。[{ data: 'ABCDEFG', mode: 'alphanumeric' }, { data: '0123456', mode: 'numeric' }, { data: [253,254,255], mode: 'byte' }] |
| color | 'black' | 二维码颜色 |
| backgroundColor | 'white' | 背景颜色 |
| enableLinearGradient | false | 启用或禁用线性渐变 |
| linearGradient | ['rgb(255,0,0)','rgb(0,255,255)'] | 用于创建线性渐变的 2 个 RGB 颜色数组 |
| gradientDirection | [170,0,0,0] | 线性梯度的方向 |
| logo | null | logo |
| logoSize | size的20% | logo尺寸 |
| logoBackgroundColor | backgroundColor | 背景色 |
| logoMargin | 2 | 间距 |
| logoBorderRadius | 0 | 圆角 |
| quietZone | 0 | quiet zone |
| getRef | null | 获取 SVG 参考以进一步使用 |
| ecl | 'M' | 纠错级别 |
| onError(error) | undefined | 代码生成过程中发生异常时触发的回调 |
