NativeScriptでQRコードを出力するには、NativeScript ZXingが一般的なようです。
ライセンスはApache2.0で一見問題無いように見えますが、よく読むと以下の記述があります。
However for entities that need a support contract, changes, enhancements and/or a commercial license please contact me at http://nativescript.tools.
ただし、サポート契約、変更、機能強化、および商用ライセンスが必要な事業体については、http://nativescript.toolsで私に連絡してください。
商用で使う場合は連絡しろとあり、HPを見に行くと有料のような気配。私は製品に組み込みたかったので、他の手段を探したところ、QR Code Generatorというものがありました。
以下、組み込み方です。
- jsファイルの配置
qrcode.jsを適当な場所に配置します。私は common/qrcode.js
- 生成用メソッドを作成
QRコードを生成するメソッドを作成し同一ディレクトリに置きました。パラメータは固定にしています。XML内にbase64形式で埋め込むため、サンプルにはありませんでしたが createDataURL()という関数を呼び出してします。createImgTag()ではHTMLのIMGタグもセットで生成されますが、createDataURL()だとbase64形式の画像データ文字列だけを返してくれます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
-
|
!
-
|
|
|
|
|
|
|
|
|
|
|
-
|
|
!
!
| const qrcode = require("./qrcode");
function createQrcode(text) {
const typeNumber = "0";
const mb = "UTF-8";
const errorCorrectionLevel = "M"; const mode = "Byte";
qrcode.stringToBytes = qrcode.stringToBytesFuncs[mb];
var qr = qrcode(typeNumber || 4, errorCorrectionLevel || 'M');
qr.addData(text, mode);
qr.make();
return qr.createDataURL();
}
exports.createQrcode = createQrcode;
|
- XMLを用意する
QRコードを表示したい場所に以下のようにImageタグを書きます。
1
|
| "qrcode" src="{{ qrcode }}"/>
|
- 埋め込み
あとは qrcodeにcreateDataURL()で生成した文字列を埋め込めばOKです。
1
2
3
4
5
6
7
8
|
| const qrcodeGenerator = require("../../common/qrcode/qrcode-generator");
:
let context;
const url = "適当なURL";
context.qrcode = qrcodeGenerator.createQrcode(url);
component.bindingContext = context;
|
画像サイズはCSSなどで適当に調整してみてください。
あとは別のスマホで正常に読み込めれば完了です。