react-native-qrcode-svg - Amazon Vega Docs

@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库依赖项。选择适用于您的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"
}

由于React Native依赖项存在已知问题，您必须应用以下解决方法。 a.在与应用的package.json文件相同的目录中打开您的.npmrc文件。如果.npmrc文件不存在，则可以添加一个。 b.添加以下行：

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

支持的版本

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

其他资源

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

​安装

​示例

​API支持

​组件API

​实现详情

​已知问题

​支持的版本

​其他资源

安装

示例