美文网首页
React Native二维码生成组件

React Native二维码生成组件

作者: 涅槃快乐是金 | 来源:发表于2022-10-25 23:04 被阅读0次

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.

相关文章

网友评论

      本文标题:React Native二维码生成组件

      本文链接:https://www.haomeiwen.com/subject/evsbzrtx.html