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,QRCanvas } 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"
            fgColor={this.state.fgColor}
            bgColor={this.state.bgColor} />
          <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
bgColor | string (CSS color) | "#000000"
fgColor | string (CSS color) | "#FFFFFF"
errorCorrectLevel | string(‘L’,’M’,’Q’,’H’) | L

QRCanvas

prop	type	default value
value	string
size	number	128
bgColor	string (CSS color)	"#000000"
fgColor	string (CSS color)	"#FFFFFF"
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.