react-native-qrcode-svg

@amazon-devices/@amazon-devices/react-native-qrcode-svgライブラリは、Vegaでのreact-native-qrcode-svg（英語のみ）のサポートを提供します。これは、react-native-svgとjavascript-qrcodeをベースとしたQRコードジェネレーターです。このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなく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コマンドを使用して、依存関係を再インストールします。

例

以下は、デフォルト設定を使用してQRCodeを作成する例です。

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

// 単純な使用方法（value以外はすべてデフォルト）
render() {
  return (
    <QRCode
      value="http://awesome.link.qr"
    />
  );
};

以下は、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`	QRコードの文字列値。手動モード（英語のみ）で定義したセグメントの配列を指定することもできます。たとえば、`[{ 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" // 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

Vegaライブラリとサービス

インストール

例

APIサポート

コンポーネントAPI

実装の詳細

既知の問題

サポートされているバージョン

関連リソース

​インストール

​例

​APIサポート

​コンポーネントAPI

​実装の詳細

​既知の問題

​サポートされているバージョン

​関連リソース

インストール

例

APIサポート

コンポーネントAPI

実装の詳細

既知の問題

サポートされているバージョン

関連リソース