美文网首页
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