react-native-qrcode-svg
react-native-qrcode-svg
开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。
@amazon-devices/@amazon-devices/react-native-qrcode-svg库在Vega上提供对react-native-qrcode-svg的支持，后者是一个基于react-native-svg和javascript-qrcode的二维码生成器。
此库由系统部署，可供适用于Vega的React Native应用使用，无需单独的安装过程。此库作为自动链接库进行部署，您的应用在运行时会链接到该库。该库保证仅与为之构建的适用于Vega的React Native版本兼容。
升级应用的适用于Vega的React Native版本时，可以考虑升级其库依赖关系的最佳实践。
有关此库及其API的更多信息，请参阅GitHub官方存储库中的README.md（仅提供英文版）。
安装
- 在
package.json文件中添加JavaScript库依赖项。"dependencies": { ... "@amazon-devices/react-native-qrcode-svg": "~2.0.0" } -
由于React Native依赖项存在已知问题，您必须应用以下解决方法。
a. 在与应用的
package.json文件相同的目录中打开您的.npmrc文件。如果.npmrc文件不存在，则可以创建一个。b. 添加以下行：<p> </p>
<div id="p6pPiO1P" markdown="block"> ``` legacy-peer-deps=true ``` </div> - 使用
npm install命令重新安装依赖项。
示例
以下代码是使用默认设置创建二维码的示例：
import QRCode from '@amazon-devices/react-native-qrcode-svg';
// 简单用法，除了值以外所有都是默认设置
render() {
return (
<QRCode
value="http://awesome.link.qr"
/>
);
};
以下代码是创建二维码和应用某些格式的示例：
import QRCode from '@amazon-devices/react-native-qrcode-svg';
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor: 'white'}}>
<QRCode value="http://amazon.com/code?cbl-code=FTV123&client=FireTvQR" ecl="L" size={300} />
</View>
);
};
API参考
属性
| 属性 | 描述 | 默认值 |
|---|---|---|
size |
以像素为单位的呈现图像的大小 | 100 |
value |
二维码的字符串值。也可以接受在手动模式下定义的分段数组，例如：[{ data: 'ABCDEFG', mode: 'alphanumeric' }, { data: '0123456', mode: 'numeric' }, { data: [253,254,255], mode: 'byte' }] |
'this is a QR code' |
logoMargin |
标志与其包装器的距离。 | 2 |
logoBorderRadius |
标志图像的边框半径。 | 0 |
ecl |
错误校正级别。 | 'M' |
已知问题和限制
使用react-native-qrcode-svg库并尝试导入TextEncoder属性时，您的应用可能会崩溃。要采用变通方法来避免此问题，请在应用中添加fast-text-encoding的依赖项。
在应用的package.json文件中，将以下代码添加到dependencies部分：
"dependencies": {
...
"fast-text-encoding": "^1.0.6"
}
在导入react-native-qrcode-svg库的位置，导入fast-text-encoding。
import React, {useState} from 'react';
import {StyleSheet, Text, ImageBackground, View, Image} from 'react-native';
import QRCode from '@amazon-devices/react-native-qrcode-svg';
import "fast-text-encoding" // 添加快速文本编码
支持的版本
| 程序包版本 | 基于 | @amazon-devices/react-native-kepler版本 |
|---|---|---|
| 2.0.x | 6.2.0 | 2.0.x |
相关主题
Last updated: 2025年9月30日
