react-native-qrcode-svg
@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バージョンのタブを選択してください。
"dependencies": { ... "@amazon-devices/react-native-qrcode-svg": "~2.0.0" }
"dependencies": { ... "@amazon-devices/react-native-qrcode-svg": "~3.0.0" } -
npm installコマンドを使用して、依存関係を再インストールします。
例
以下は、デフォルト設定を使用してQRCodeを作成する例です。
// 単純な使用方法（value以外はすべてデフォルト）
import QRCode from '@amazon-devices/react-native-qrcode-svg';
export const App = () => {
return (
<QRCode
value="http://awesome.link.qr"
/>
);
};
以下は、QRコードを作成して書式を適用する例です。
import QRCode from '@amazon-devices/react-native-qrcode-svg';
import { View } from 'react-native';
export const App = () => {
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 |
関連リソース
その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。
Last updated: 2026年7月10日
