React Native二维码生成组件

qrcode-react-native

React Native二维码生成组件：qrcode-react-native，纯JS组件，

• 支持安卓和IOS双平台
• 支持中文和英文
• 可以自定义尺寸、前景色和背景色
• 支持Image、canvas两种模式（canvas依赖与react-native-web）
• 支持使用react-native-web

效果图

安装

npm i qrcode-react-native --save

import React from "react";
import { SafeAreaView, Text } from "react-native";

import { QRCodeImg } from "qrcode-react-native";
export default class App extends React.Component {
  state = {
    codeValue: "http://picturesofpeoplescanningqrcodes.tumblr.com/",
    size: 128,
    fgColor: "#000000",
    bgColor: "#ffffff",
  };

  render() {
    return (
      <SafeAreaView>
        <QRCodeImg
          codeValue={this.state.codeValue}
          size={this.state.size}
          errorCorrectLevel="L"
        />
        <QRCanvas codeValue={this.state.codeValue}
          size={this.state.size}
          errorCorrectLevel='L'
          fgColor={this.state.fgColor}
          bgColor={this.state.bgColor} />
        <Text>{this.state.codeValue}</Text>
      </SafeAreaView>
    );
  }
}

props参数说明

QRCodeImg

prop	type	default value
value	string
size	number	128
errorCorrectLevel	string('L','M','Q','H')	L

QRCanvas

prop	type	default value
value	string
size	number	128
bgColor	string (CSS color)	"#000"
fgColor	string (CSS color)	"#FFF"
errorCorrectLevel	string('L','M','Q','H')	L

说明： QRCodeImg 不支持前景和背景色 QRCanvas支持前景和背景色，但是依赖react-native-web

组件地址 GitHub - lzhwWeb/qrcode-react-native: A react-native component to generate QRcode,you can use Image or Canvas.