すべてのスキャン方法です!書籍アプリケーションのHuaweiスキャンキットの統合

導入

この記事では、アプリケーションでHuaweiスキャンキットを統合されます.Huaweiスキャンキットスキャンとパースすべての主要な1 Dおよび2 Dバーコードだけでなく、すぐにバーコードをあなたのアプリケーションにスキャン機能を構築するのに役立ちますバーコードを生成します.スキャンキットは、自動的に検出し、拡大し、距離からバーコードを認識し、同じ方法で非常に小さなバーコードをスキャンすることができます.これは、薄暗い照明やバーコードが反射、汚い、ぼやけた、または円筒面に印刷されているようなsuboptimal状況でも動作します.これは、より高いスキャン成功率と改善されたユーザー経験につながります.

ネイティブに反応する

ネイティブは、AndroidとIOSプラットフォームの両方で移植可能なJavaScriptのみの助けを借りて、本物でエキサイティングなモバイルアプリケーションを作成するのに役立ちます.
だけでコードを一度、反応ネイティブアプリは、開発期間を節約するのに役立ちますIOSとAndroidプラットフォームの両方で利用可能です.
Return Nativeは、JavaScriptコードをビルドするUIコンポーネントの階層を構築するフレームワークです.
これは、通常のIOSとAndroidアプリと同じ基本的なUIビルディングブロックを使用します.

要件

オペレーティングシステム(MacOS、Linux、Windows).

はHMS 4.0.2.300以降でHuawei電話を持たなければなりません.

は、Android Studio、JDK 1.8、SDKプラットフォーム26とGradle 4.6をインストールしたラップトップまたはデスクトップを持っている必要があります.

最小APIレベル21が必要です.

EMUI 9.0.0以降のバージョンデバイスが必要です.

HMS依存関係を統合する

は、Huawei開発者ウェブサイトでHuawei開発者と完全なアイデンティティ検証として登録して、Huawei IDを登録することを参照します

Android Studioでプロジェクトを作成し、Android Studioプロジェクトの作成を参照してください.

SHA - 256証明書指紋を生成します.

SHA - 256証明書指紋を生成する

.「ビュー」「ツール」ウィンドウを選択します.
またはSHA 256コード

で説明されているようにCMDを使用します.

AppGallery接続でアプリケーションを作成します.

AppConnectサービスをダウンロードします.JSONファイルのアプリ情報、コピーと貼り付けアプリのディレクトリの下にAndroidのプロジェクトでは、次のように.

SHA - 256証明書指紋を入力して保存をクリックします.

ネイティブプロジェクトの準備

環境設定、以下のリンクを参照してください.
https://reactnative.dev/docs/environment-setup

コマンドを使用してプロジェクトを作成します.
ネイティブのinitプロジェクト名

に反応します
NPMを使用してダウンロードプラグイン.
プラグインを統合するには、準備段階が完了し、次のコマンドを使用してプラグインをダウンロードしてください.
NPM i @ hmScore/反応ネイティブHMSスキャン

オープン設定.プロジェクトディレクトリの下にあるGradle

include ':react-native-hms-scan'
project(':react-native-hms-scan').projectDir = new File(rootProject.projectDir, '../node_modules/@hmscore/react-native-hms-scan/android')

オープンビルド.プロジェクトの下にあるGradleファイル.DIR >アンドロイドアプリディレクトリ.
ビルド依存関係の設定.

dependencies {
    ...
    implementation project(":react-native-hms-scan")
    ...
}

メインアプリケーションファイルに以下を追加します

import com.huawei.hms.rn.scan.RNHMSScanPackage;

List<ReactPackage> getPackages() {
          List<ReactPackage> packages = new PackageList(this).getPackages();
          packages.add(new RNHMSScanPackage());
          return packages;

Androidに許可を下に追加します.マニフェストファイル.

<p><uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
p>

開発

動的にコードのパーミッションを要求します.

import ScanPlugin from '@hmscore/react-native-hms-scan';
//Call requestCameraAndStoragePermission API.
ScanPlugin.Permission.requestCameraAndStoragePermission()
    .then((res) => console.log("Result:", res));

バーコードをスキャンする前に必要なアクセス許可が有効かどうかを確認します.

//Call hasCameraAndStoragePermission API.
ScanPlugin.Permission.hasCameraAndStoragePermission()
    .then((res) => console.log("Result:", res));

生成バーコード

ScanPlugin.Utils.buildBitmap({
              content: this.state.content,
              type: this.state.type,
              width: this.state.width,
              height: this.state.height,
              margin: this.state.margin,
              color: this.state.color,
              backgroundColor: this.state.backgroundColor,
            })
              .then((res) => {
                this.setState({showImage: true});
                this.setState({base64ImageData: res});
              })

ビットマップをデコード

ScanPlugin.Utils.decodeWithBitmap({
              data: barcode_images.barcode,
              scanType: ScanPlugin.ScanType,
              additionalScanTypes: [],
            })
              .then((res) =>
                this.setState({
                  decodesBitmap: [...this.state.decodesBitmap, res],
                }),
              )                this.setState({base64ImageData: res});

以下のようにデフォルトのビューモードでスキャンキットを使用する方法
アプリは、カメラのアクセスとファイルの読み取り権限を持っているかどうかを確認します.
アプリケーションが必要なアクセス許可を持っている場合は、スキャンキットのUutilsモジュールからStartDefaultView APIを呼び出して、ネイティブプラグインをスキャンしてスキャンUIを起動します.
スキャンするUIが正常に表示されているかどうかを確認します.
走査結果に基づいた走査結果を得る.

DefaultViewRequestオブジェクトを作成します.

パラメータは以下の通りです.

import ScanPlugin from '@hmscore/react-native-hms-scan';
let defaultViewRequest = {
    scanType: ScanPlugin.ScanType.All,
    additionalScanTypes: [],
}

StartDefaultView APIをリクエストオブジェクトで呼び出し、スキャンUIを起動し、ScanResponseオブジェクトである既定ビューのスキャン結果を取得します.

ScanPlugin.Utils.startDefaultView(defaultViewRequest)
  .then((res) => console.log(res)) 
  .catch((e) => console.log(e))

スキャンUIをカスタマイズするためにCustomizedViewRequestオブジェクトを構築します.

ScanPlugin.CustomizedView.startCustomizedView({
              scanType: ScanPlugin.ScanType,
              additionalScanTypes: [],
              rectHeight: 200,
              rectWidth: 200,
              continuouslyScan: true,
              isFlashAvailable: false,
              flashOnLightChange: false,
              isGalleryAvailable: false,
            })
              .then((res) =>
                this.setState({
                  decodesCustom: [...this.state.decodesCustom, res],
                }),
              )

テスト

次のコマンドを使用してAndroidアプリを実行します.react-native run-android

結果

ヒントとトリック

は13バーコードフォーマットをサポートしています.

は、スキャン・スピードを改善するので、必要なフォーマットのバーコードをサポートするためにScan Kitのために構成を加えるだけです.

HMSはネイティブ・プラグインがEXPO CLIを支持しない、そして、支持だけがネイティブCLI

に反応しないと反応します

結論

この記事では、我々はどのようにアプリケーションにスキャンキットを統合するには、すぐにあなたのアプリケーションにバーコードスキャン機能を構築することを学んだ.スキャンキットは、自動的に検出し、拡大し、距離からバーコードを認識し、同じ方法で非常に小さなバーコードをスキャンすることができます.

リファレンス

スキャンキット:Documentation
スキャンキット:Training Video