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バージョンとの間でのみ保証されます。
アプリのビルドに使用しているVega向けReact Nativeのバージョンを上げる場合は、ベストプラクティスとして、依存するライブラリのバージョンも上げることをお勧めします。
このライブラリとAPIの詳細については、公式のGitHubリポジトリにあるREADME.md（英語のみ）を参照してください。
インストール
package.jsonファイルにJavaScriptライブラリの依存関係を追加します。"dependencies": { ... "@amazon-devices/react-native-qrcode-svg": "~2.0.0" }- React Nativeの依存関係には既知の問題があるため、次の回避策を適用する必要があります。
- アプリのpackage.jsonファイルと同じディレクトリにある.npmrcファイルを開きます（.npmrcが存在しない場合は追加してください）。
- 次の行を追加します。
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を追加
サポートされているバージョン
| パッケージのバージョン | ベース | @amazon-devices/react-native-kepler version |
|---|---|---|
| 2.0.x | 6.2.0 | 2.0.x |
関連リソース
その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。
Last updated: 2025年9月30日
