すべてのスキャン方法です!書籍アプリケーションのHuaweiスキャンキットの統合
7739 ワード
導入
この記事では、アプリケーションでHuaweiスキャンキットを統合されます.Huaweiスキャンキットスキャンとパースすべての主要な1 Dおよび2 Dバーコードだけでなく、すぐにバーコードをあなたのアプリケーションにスキャン機能を構築するのに役立ちますバーコードを生成します.スキャンキットは、自動的に検出し、拡大し、距離からバーコードを認識し、同じ方法で非常に小さなバーコードをスキャンすることができます.これは、薄暗い照明やバーコードが反射、汚い、ぼやけた、または円筒面に印刷されているようなsuboptimal状況でも動作します.これは、より高いスキャン成功率と改善されたユーザー経験につながります.
ネイティブに反応する
ネイティブは、AndroidとIOSプラットフォームの両方で移植可能なJavaScriptのみの助けを借りて、本物でエキサイティングなモバイルアプリケーションを作成するのに役立ちます.
だけでコードを一度、反応ネイティブアプリは、開発期間を節約するのに役立ちますIOSとAndroidプラットフォームの両方で利用可能です.
Return Nativeは、JavaScriptコードをビルドするUIコンポーネントの階層を構築するフレームワークです.
これは、通常のIOSとAndroidアプリと同じ基本的なUIビルディングブロックを使用します.
要件
HMS依存関係を統合する
またはSHA 256コード
![](https://s1.md5.ltd/image/3ecf2a47276b8e7f60ecfa42dcd1e348.png)
![](https://s1.md5.ltd/image/a14e001efe082bfe0ccafa7ce7594446.png)
https://reactnative.dev/docs/environment-setup
ネイティブのinitプロジェクト名
NPMを使用してダウンロードプラグイン.
プラグインを統合するには、準備段階が完了し、次のコマンドを使用してプラグインをダウンロードしてください.
NPM i @ hmScore/反応ネイティブHMSスキャン
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
結果
![](https://s1.md5.ltd/image/a78385ff0ae079ecfaa6da16b1c8ebb8.png)
![](https://s1.md5.ltd/image/9fb31139291ddbf981a0fa6a0d3fec6c.jpg)
![](https://s1.md5.ltd/image/f2f2645ade30de2e7ef5b3d98b19bd2f.png)
ヒントとトリック
結論
この記事では、我々はどのようにアプリケーションにスキャンキットを統合するには、すぐにあなたのアプリケーションにバーコードスキャン機能を構築することを学んだ.スキャンキットは、自動的に検出し、拡大し、距離からバーコードを認識し、同じ方法で非常に小さなバーコードをスキャンすることができます.
リファレンス
スキャンキット:Documentation
スキャンキット:Training Video
Reference
この問題について(すべてのスキャン方法です!書籍アプリケーションのHuaweiスキャンキットの統合), 我々は、より多くの情報をここで見つけました https://dev.to/hmscommunity/everything-is-just-a-scan-way-integration-of-huawei-scan-kit-in-books-applications-539nテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol