市场平台
作者 NativeScript.org
@la-corp/la-barcodescanner-lib-aar
由 la-corp 提供 | v1.0.8
从 EddyVerbruggen 的 barcodescanner-lib-aar 分支而来
npm i --save @la-corp/la-barcodescanner-lib-aar

NativeScript BarcodeScanner

Build Status NPM version Downloads Twitter Follow

更新说明

本仓库是从 [ https://github.com/EddyVerbruggen/nativescript-barcodescanner ] 分支出来的，并更新了核心模块，使其与 Barcode Scanner 应用 4.7.8 最新版本相当，该版本支持 Android SDK API 级别低于 22。

想要快速演示吗？

请注意，只在真实设备上运行此操作才有意义。

git clone https://github.com/quydau35/nativescript-barcodescanner barcodedemo
cd barcodedemo/src

全屏，程序化（iOS 和 Android）

npm run demo.android (or demo.ios / demo.ios.device)

嵌入（仅限 iOS）

npm run demo-ng.ios (or demo.ios.device)

支持的条码类型

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。

安装

从命令提示符进入您的应用程序根目录并执行

tns plugin add @la-corp/la-barcodescanner-lib-aar

在 iOS 中嵌入扫描仪

如果您还需要为 Android 嵌入扫描仪，请考虑使用我添加到 NativeScript Firebase 插件的 ML Kit 功能 的机器学习驱动的条码扫描仪！

如您所见，您可以根据需要以任何方式设置样式，甚至可以将其与图像或按钮叠加。要重新创建上面的布局，请查看 演示应用程序中的这些行。

💡 提示：如果您没有销毁嵌入扫描仪的组件/页面（而是显示模态或导航“向前”），您可以从插件版本 3.4.0 开始“暂停”扫描仪（将 pause 属性设置为 true）。当适用时进行设置。

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Barcode="@la-corp/la-barcodescanner-lib-aar">

以下是一个示例标签，显示所有当前支持选项。属性的默认值等于 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/element-registry";
registerElement("BarcodeScanner", () => require("@la-corp/la-barcodescanner-lib-aar").BarcodeScannerView);

视图

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

有关详细信息，请参阅 'demo-ng'。由于在 Android 上不支持嵌入视图，因此请勿运行它。

在 Vue 中嵌入

main.ts

Vue.registerElement('BarcodeScanner', () => require('@la-corp/la-barcodescanner-lib-aar').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 添加一个空原因。此值将覆盖您自己指定的任何内容。

用法

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

功能：扫描（单次模式）

TypeScript

  import { BarcodeScanner } from "@la-corp/la-barcodescanner-lib-aar";
  let 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("@la-corp/la-barcodescanner-lib-aar").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);
      }
  );

功能：扫描（批量/连续模式）

在此模式下，扫描器会持续将扫描到的代码报告回您的代码，但只有在用户告诉它或您程序调用了 stop 时，它才会停止。

插件会为您处理重复项，所以请不用担心检查这些；在同一个扫描会话中的每个结果都是唯一的，除非您将 reportDuplicates 设置为 true。

以下是一个扫描 3 个唯一的 QR 代码然后程序停止扫描的示例。您会注意到 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("@la-corp/la-barcodescanner-lib-aar");

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

功能：hasCameraPermission / requestCameraPermission

在 Android 6+ 上，当针对 API 级别 23+ 时，您需要在运行时请求使用相机的权限，即使 AndroidManifest.xml 中存在 uses-permission 标签为相机。

在 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 '@la-corp/la-barcodescanner-lib-aar';

@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 '@la-corp/la-barcodescanner-lib-aar';

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

Webpack 使用

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

import { BarcodeScanner } from "@la-corp/la-barcodescanner-lib-aar";

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/quydau35/barcodescanner-lib-aar/