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.
网友评论