react-native-qrcode-svg

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。

@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库依赖项。选择适用于您的React Native版本的选项卡。
- React Native 0.72
- React Native 0.83
已复制到剪贴板。
"dependencies": { ... "@amazon-devices/react-native-qrcode-svg": "~2.0.0" }
已复制到剪贴板。
"dependencies": { ... "@amazon-devices/react-native-qrcode-svg": "~3.0.0" }
使用npm install命令重新安装依赖项。

示例

以下是使用默认设置创建二维码的示例：

复制到剪贴板。

// 简单用法，除了值以外所有都是默认设置
import QRCode from '@amazon-devices/react-native-qrcode-svg';

export const App = () => {
  return (
    <QRCode
      value="http://awesome.link.qr"
    />
  );
};

以下是创建二维码和应用某些格式的示例：

复制到剪贴板。

import QRCode from '@amazon-devices/react-native-qrcode-svg';
import { View } from 'react-native';

export const App = () => {
  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支持

组件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" // 添加快速文本编码

支持的版本

NPM程序包版本	Vega SDK版本	Vega OS版本	React Native版本
~2.0.0	0.23及更早版本	`操作系统1.1 (1401010009820)`及更早版本	0.72
~3.0.0	0.24	`操作系统1.2 (2101020054720)`	0.72、0.83

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。

Last updated: 2026年7月10日