二维码如何在 Angular Nativescript App 中显示答案

【问题标题】：QR code how to display in Angular Nativescript App二维码如何在 Angular Nativescript App 中显示
【发布时间】：2018-01-19 15:46:24
【问题描述】：

找到了很多关于二维码扫描功能的示例，但找不到任何关于显示二维码的示例。不确定如何做到这一点，因为 nativesript 正在使用特定的基于 xml 的控件。似乎您无法使用与这些不同的东西来构建 UI。如何解决这个问题呢。我还希望 QR 码的可视化在离线模式下工作。谢谢！

【问题讨论】：

我没用过这个插件，但是它可以创建二维码npmjs.com/package/nativescript-zxing。它看起来很简单，通过创建一个图像，然后您可以像显示任何其他图像一样显示它。
@LyubomirVelchev 如果我的回答解决了您的问题，请将其标记为已接受。 :)

标签： nativescript qr-code angular2-nativescript

【解决方案1】：

上面评论中提到的如何使用@NathanaelA 的nativescript-plugin (nativescript-zxing) 显示二维码的示例：

import * as imgSource from "tns-core-modules/image-source";

const ZXing = require('nativescript-zxing');

const zx = new ZXing();
const barcode = zx.createBarcode({encode: "Text", height: 100, width: 100, format: ZXing.QR_CODE});

如果在 Android 上运行，返回值 barcode 是 android.graphics.Bitmap，如果在 iOS 上运行，返回值是 UIImage。

img.imageSource = imgSource.fromNativeSource(barcode);

适当地使用本机图像实例。这里img 是nativescript Image widget 和imgSource 是nativescript 类ImageSource。您使用 ImageSource 实例提供的 fromNativeSource 方法的结果设置 Image 小部件的 imageSource 属性。

通常，您可以在其存储库的演示文件夹中找到有关如何使用插件的示例。

亲切的问候，
大卫

【讨论】：