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ライブラリの依存関係を追加します。

"dependencies": {
   ...
   "@amazon-devices/react-native-qrcode-svg": "~2.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リファレンス

プロパティ

プロパティ	説明	デフォルト
`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を追加

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

パッケージのバージョン	ベース	@amazon-devices/react-native-keplerバージョン
2.0.x	6.2.0	2.0.x

Vegaライブラリとサービス

インストール

例

APIリファレンス

プロパティ

既知の問題と制限事項

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

関連トピック

​インストール

​例

​APIリファレンス

​プロパティ

​既知の問題と制限事項

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

​関連トピック

インストール

例

APIリファレンス

プロパティ

既知の問題と制限事項

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

関連トピック