最近RN项目有生成二维码的需求，百度了一下，一些文章推荐的主要有
react-native-qrcode-svg 和 react-native-qrcode，我们来分析一下。
react-native-qrcode-svg
react-native-qrcode-svg 是基于node-qrcode 和react-native-svg
-
node-qrcode是纯js实现的生成二维码的库 -
react-native-svg是有原生依赖的让rn支持svg的库
原理：
1、先使用node-qrcode的create方法生成如下的对象，
image.png
2、将生成的对象的modules.data生成svg的path
3、将path绘制到react-native-svg上，并且可以加上logo，就得到了二维码了
react-native-qrcode
react-native-qrcode是基于 qr.js 和rn自带的WebView(而目前高版本的RN，自带WebView已经从RN中移除了，需要使用community版本的WebView)，原理是利用web端的canvas绘制二维码，再用WebView展示，这里不建议使用这个库
show magic
可以看到前者太重了（依赖react-native-svg，有原生依赖），后者太老了（包括qr.js也是很多年没维护），那么有没有更简单的方法实现二维码呢？
其实有一个纯js的库qrcode-generator 提供了生成base64二维码图片的功能，然后直接用react native的Image组件加载base64图片就可以了。
示例：
import React, { useState, useEffect } from 'react';
import { Image } from 'react-native';
import QRCode from 'qrcode-generator';
export default ({text, style}) => {
const [base64Img, setBase64Img] = useState(undefined);
useEffect(() => {
const typeNumber = 4;
const errorCorrectionLevel = 'L';
const qr = QRCode(typeNumber, errorCorrectionLevel);
qr.addData(text);
qr.make();
setBase64Img(qr.createDataURL());
}, [text]);
return (
base64Img ?
<Image source={{ uri: base64Img }} style={style} resizeMode="contain"/>
:
null
);
};
使用
<CustomQrCode text='hello world' style={{width: 50, height: 50}} />
