最近RN項(xiàng)目有生成二維碼的需求，百度了一下，一些文章推薦的主要有
react-native-qrcode-svg 和 react-native-qrcode，我們來分析一下。

react-native-qrcode-svg

react-native-qrcode-svg 是基于node-qrcode 和react-native-svg

• node-qrcode 是純js實(shí)現(xiàn)的生成二維碼的庫
• react-native-svg 是有原生依賴的讓rn支持svg的庫
  原理：
  1、先使用node-qrcode的create方法生成如下的對(duì)象，
  
  image.png
  
  2、將生成的對(duì)象的modules.data生成svg的path
  3、將path繪制到react-native-svg上，并且可以加上logo，就得到了二維碼了

react-native-qrcode

react-native-qrcode是基于 qr.js 和rn自帶的WebView(而目前高版本的RN，自帶WebView已經(jīng)從RN中移除了，需要使用community版本的WebView)，原理是利用web端的canvas繪制二維碼，再用WebView展示，這里不建議使用這個(gè)庫

show magic

可以看到前者太重了（依賴react-native-svg，有原生依賴），后者太老了（包括qr.js也是很多年沒維護(hù)），那么有沒有更簡(jiǎn)單的方法實(shí)現(xiàn)二維碼呢？

其實(shí)有一個(gè)純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}} />