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依赖项存在已知问题，您必须应用以下解决方法。
1. 在与应用的package.json文件相同的目录中打开您的.npmrc文件。（如果 .npmrc不存在，请添加一个）。
2. 添加以下行。
  已复制到剪贴板。
  legacy-peer-deps=true
使用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支持

组件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日