2020-04-03 react native 生成二维码

最近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 ?
      
      :
      null
  );
};

使用