市场place
作者 NativeScript.org
@nstudio/nativescript-barcodescanner
由 NativeScript 团队开发 | v5.0.1
使用 NativeScript 应用扫描 QR 码/条形码。
npm i --save @nstudio/nativescript-barcodescanner

NativeScript BarcodeScanner

💡 插件版本 5.0.0+ 与 NativeScript 7+ 兼容，并且也支持 Mac M1。如果您需要针对较旧的 NativeScript 版本，请继续使用插件 nativescript-barcodescanner 3.4.2。

支持的条形码类型

iOS 和 Android

  • CODE_39
  • CODE_93
  • CODE_128
  • DATA_MATRIX
  • EAN_8
  • EAN_13
  • ITF (也称为 ITF14)
  • PDF_417 (仅在 Android 上，当通过 formats 明确传递时)
  • QR_CODE
  • UPC_A
  • UPC_E

仅限 Android

  • CODABAR
  • MAXICODE
  • RSS_14

仅限 iOS

  • AZTEC
  • CODE_39_MOD_43
  • INTERLEAVED_2_OF_5

关于 UPC_A 和 EAN_13 的说明

当指定其中之一（或两者）时，都可以返回。您可以通过检查结果对象的 format 属性来查看实际类型。有关详细信息，请参阅 #176。

安装

npm install @nstudio/nativescript-barcodescanner

嵌入扫描仪（iOS）

如果您还需要为 Android 嵌入扫描仪，请考虑使用我添加到 NativeScript Firebase 插件的 ML Kit 功能 的 Machine Learning 电力扫描仪！

如你所见，你可以按任何你喜欢的方式样式化视图，甚至可以将其与图像或按钮叠加。要重新创建上面的布局，请查看 演示应用中的这些行。

💡 小贴士：如果您没有销毁嵌入扫描仪的组件/页面（而是显示模态或导航“向前”），您可以通过将 pause 属性设置为 true 来“暂停”扫描仪（从插件版本 3.4.0 开始）。在适用时简单地设置该属性。

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Barcode="@nstudio/nativescript-barcodescanner">

这里有一个示例标签，显示了所有当前支持选项。属性的默认值与 scan 函数相同。

<iOS>
    <Barcode:BarcodeScannerView
      class="scanner-round"
      formats="QR_CODE, EAN_13"
      beepOnScan="true"
      reportDuplicates="true"
      preferFrontCamera="false"
      pause="{{ pause }}"
      scanResult="{{ onScanResult }}" />
</iOS>

Angular

组件/模块

import { registerElement } from "@nativescript/angular";
registerElement("BarcodeScanner", () => require("@nstudio/nativescript-barcodescanner").BarcodeScannerView);

视图

<BarcodeScanner
      class="scanner-round"
      formats="QR_CODE, EAN_13"
      beepOnScan="true"
      reportDuplicates="true"
      preferFrontCamera="false"
      [pause]="pause"
      (scanResult)="onScanResult($event)">
</BarcodeScanner>

Vue

main.ts

Vue.registerElement('BarcodeScanner', () => require('@nstudio/nativescript-barcodescanner').BarcodeScannerView)

视图

<BarcodeScanner
    row="1"
    height="300"
    formats="QR_CODE, EAN_13, UPC_A"
    beepOnScan="true"
    reportDuplicates="true"
    preferFrontCamera="false"
    :pause="pause"
    @scanResult="onScanResult"
    v-if="isIOS">
</BarcodeScanner>

有关详细信息，请参阅 'demo-vue'。

iOS 运行时权限原因

iOS 10+ 不仅需要此弹出窗口，还需要一个 原因。在这种情况下是“我们想使用相机 ...”。

您可以通过将以下内容添加到 app/App_Resources/ios/Info.plist 来提供自己的原因以访问相机

  <key>NSCameraUsageDescription</key>
  <string>My reason justifying fooling around with your camera</string>

为了避免忘记提供原因而使您的应用崩溃，此插件在构建过程中将向 .plist 添加一个空的理由。此值会被您指定的任何内容覆盖。

用法

提示：在扫描过程中，您可以使用音量加减按钮切换手电筒。

函数：scan（单次模式）

TypeScript

  import { BarcodeScanner } from "@nstudio/nativescript-barcodescanner";
  const barcodescanner = new BarcodeScanner();

  barcodescanner.scan({
    formats: "QR_CODE, EAN_13",
    cancelLabel: "EXIT. Also, try the volume buttons!", // iOS only, default 'Close'
    cancelLabelBackgroundColor: "#333333", // iOS only, default '#000000' (black)
    message: "Use the volume buttons for extra light", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: true,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: true,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: () => { console.log("Scanner closed")}, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: orientation,     // Android only, default undefined (sensor-driven orientation), other options: portrait|landscape
    openSettingsIfPermissionWasPreviouslyDenied: true, // On iOS you can send the user to the settings app if access was previously denied
    presentInRootViewController: true // iOS-only; If you're sure you're not presenting the (non embedded) scanner in a modal, or are experiencing issues with fi. the navigationbar, set this to 'true' and see if it works better for your app (default false).
  }).then((result) => {
      // Note that this Promise is never invoked when a 'continuousScanCallback' function is provided
      alert({
        title: "Scan result",
        message: "Format: " + result.format + ",\nValue: " + result.text,
        okButtonText: "OK"
      });
    }, (errorMessage) => {
      console.log("No scan. " + errorMessage);
    }
  );

注意，上面的 result.format 是 这些 之一。

JavaScript

  var BarcodeScanner = require("@nstudio/nativescript-barcodescanner").BarcodeScanner;
  var barcodescanner = new BarcodeScanner();

  barcodescanner.scan({
    formats: "QR_CODE,PDF_417",   // Pass in of you want to restrict scanning to certain types
    cancelLabel: "EXIT. Also, try the volume buttons!", // iOS only, default 'Close'
    cancelLabelBackgroundColor: "#333333", // iOS only, default '#000000' (black)
    message: "Use the volume buttons for extra light", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
    showFlipCameraButton: true,   // default false
    preferFrontCamera: false,     // default false
    showTorchButton: true,        // default false
    beepOnScan: true,             // Play or Suppress beep on scan (default true)
    fullScreen: true,             // Currently only used on iOS; with iOS 13 modals are no longer shown fullScreen by default, which may be actually preferred. But to use the old fullScreen appearance, set this to 'true'. Default 'false'.
    torchOn: false,               // launch with the flashlight on (default false)
    closeCallback: function () { console.log("Scanner closed"); }, // invoked when the scanner was closed (success or abort)
    resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
    orientation: "landscape",     // Android only, optionally lock the orientation to either "portrait" or "landscape"
    openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
  }).then(
      function(result) {
        console.log("Scan format: " + result.format);
        console.log("Scan text:   " + result.text);
      },
      function(error) {
        console.log("No scan: " + error);
      }
  );

函数：scan（批量/连续模式）

在此模式下，扫描仪将持续向您的代码报告扫描的代码，但只有在用户告诉它或您以编程方式调用 stop 时才会关闭。

插件会自动处理重复项，所以您无需担心检查这些项；除非您将reportDuplicates设置为true，否则同一扫描会话内的每个结果都是唯一的。

以下是一个扫描3个独特的二维码然后程序停止扫描的示例。您会注意到Promise将不再接收结果，因为可能会有很多结果。

JavaScript

  var count = 0;
  barcodescanner.scan({
    formats: "QR_CODE",
    // this callback will be invoked for every unique scan in realtime!
    continuousScanCallback: function (result) {
      count++;
      console.log(result.format + ": " + result.text + " (count: " + count + ")");
      if (count === 3) {
        barcodescanner.stop();
      }
    },
    closeCallback: function () { console.log("Scanner closed"); }, // invoked when the scanner was closed
    reportDuplicates: false // which is the default
  }).then(
      function() {
        console.log("We're now reporting scan results in 'continuousScanCallback'");
      },
      function(error) {
        console.log("No scan: " + error);
      }
  );

函数：available

注意，iOS实现目前总是返回true，在Android上，我们实际上会检查摄像头是否可用。

JavaScript

  var barcodescanner = require("@nstudio/nativescript-barcodescanner");

  barcodescanner.available().then(
      function(avail) {
        console.log("Available? " + avail);
      }
  );

函数：hasCameraPermission / requestCameraPermission

在Android 6+上，当针对API级别23+进行目标定位时，您需要在运行时请求使用摄像头的权限。即使uses-permission标签在AndroidManifest.xml中存在Camera权限。

在iOS 10+上也有类似的情况。

从版本1.5.0开始，您可以允许插件为您处理（如果需要，当扫描器启动时将显示提示），但如果出于某种原因您想自己处理权限，可以使用这些函数。

JavaScript

  barcodescanner.hasCameraPermission().then(
      function(granted) {
        // if this is 'false' you probably want to call 'requestCameraPermission' now
        console.log("Has Camera Permission? " + result);
      }
  );

  // if no permission was granted previously this wil open a user consent screen
  barcodescanner.requestCameraPermission().then(
      function() {
        console.log("Camera permission requested");
      }
  );

与@nativescript/angular一起使用

您过去可能在组件构造函数中注入了BarcodeScanner类，但请不要再这样做，因为在发布版本中您可能会遇到崩溃。

所以，而不是

// my-component.ts
import { Component, Inject } from '@angular/core';
import { BarcodeScanner } from '@nstudio/nativescript-barcodescanner';

@Component({ ... })
  export class MyComponent {
    constructor(private barcodeScanner: BarcodeScanner) {
  }

  //use the barcodescanner wherever you need it. See general usage above.
  scanBarcode() {
    this.barcodeScanner.scan({ ... });
  }
}

只需这样做

// my-component.ts
import { Component, Inject } from '@angular/core';
import { BarcodeScanner } from '@nstudio/nativescript-barcodescanner';

@Component({ ... })
  //use the barcodescanner wherever you need it. See general usage above.
  scanBarcode() {
    new BarcodeScanner().scan({ ... });
  }
}

Webpack使用

如果在Webpacking时遇到错误，请打开app.module.ts并添加以下内容

import { BarcodeScanner } from "@nstudio/nativescript-barcodescanner";

export function createBarcodeScanner() {
  return new BarcodeScanner();
}

providers: [
  { provide: BarcodeScanner, useFactory: createBarcodeScanner }
]

故障排除

如果您在Android上遇到TypeError: Cannot read property 'zxing' of undefined错误，请尝试以下步骤

  1. 从您的设备中删除应用
  2. 删除platforms/android文件夹。这会触发完整的重建
  3. 运行tns run android

依赖项/相关项目

此插件封装了Android和iOS的库，以便通过统一的API轻松访问条码扫描器。使用的库有

iOS

用于访问iOS API的自定义框架：https://github.com/EddyVerbruggen/ios-framework-barcodescanner

Android

ZXing：https://github.com/zxing/zxing/releases

由于将库作为直接依赖项使用不切实际，因此有一个库项目采用了ZXing的源代码，并将其编译成AAR以在Android上使用：https://github.com/EddyVerbruggen/barcodescanner-lib-aar/