NativeScript-Qr-Generator

NativeScript-Qr-Generator 是一个为 NativeScript 生成二维码图片的插件。

安装

转到您的应用程序根目录并执行

ns plugin add nativescript-qr-generator

用法

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">

    <ActionBar title="My App" icon="" />

    <GridLayout rows="*,*,*" columns="*" class="qr-example">
        <Label row="0" col="0" text="Color and size" ></Label>
        <Image src="" row="1" col="0" loaded="{{onImageLoadedBasic}}"></Image>
    </GridLayout>
</Page>

import { Observable, ImageSource, Image } from '@nativescript/core';
import { QrGenerator } from 'nativescript-qr-generator';

export class HelloWorldModel extends Observable {
  private _counter: number
  private _message: string

  constructor() {
    super();
  }

  onImageLoadedBasic(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate(`Hello World`, {
            logo: {
                path: "~/assets/fb.png",
                ratio: {
                    w: 50, h: 50
                }
            }
        });
        image.imageSource = new ImageSource(result);
    }

    onImageLoadedColors(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate('Hello World with colors', { color: '#4183d7', backgroundColor: '#67809f' });
        image.imageSource = new ImageSource(result);
    }

    onImageLoadedColorsSize(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate('Hello World with colors and custom size', { size: { width: 100, height: 100 }, color: '#fbd90e', backgroundColor: '#0d0c0c' });
        image.imageSource = new ImageSource(result);
    }
}

Angular 使用方法

  import { Component } from "@angular/core";
  import { ImageSource } from "@nativescript/core";
  import { Image } from "@nativescript/core";
  import { QrGenerator } from "nativescript-qr-generator";

  @Component({
      selector: "ns-main",
      template: "<Image src="" (loaded)="onImageLoaded($event)"></Image>"
  })
  export class AppComponent {

      constructor() {} 
      
      onImageLoaded(){
          const image = args.object as Image;
          const result = new QrGenerator().generate('Hello World');
          image.imageSource = new ImageSource(result);
      }
  }

API

致谢

此插件封装了以下原生 QR 生成库

Android: https://github.com/kenglxn/QRGen
iOS: https://github.com/gscarrone/iOS-QR-Code-Generator