web-dev-qa-db-ja.com

反応ネイティブを使用したバーコードスキャン

私はreact-native-cameraを使用してAndroidおよびiOSの両方のバーコードスキャナーを構築しています。

IOSでバーコードをスキャンすることはできますが、問題はスキャン境界の視覚的要素がないことです。また、画面の中央だけでなく、画面全体でバーコードをスキャンできるようにしたいと考えています。

それを回避する方法はありますか？他にも私のために機能するライブラリがある場合。

react-nativereact-native-camera
9
Rohit Goyal

まあそれは私に一日かかりましたが、私はようやく機能するライブラリを見つけました。誰かがここで自分の道を見つけ、Androidで動作するネイティブの反応用のバーコードスキャナーを探している場合...私はここにいます。

https://github.com/ideacreation/react-native-barcodescanner

rnpmがない場合は最初にそれを入手してください...それは非常に役立ちます！（npm install -g rnpm）（ https://github.com/rnpm/rnpm ）

次に、プロジェクトファイルで次のコマンドを実行します。

npm install --save react-native-barcodescanner

rnpm link react-native-barcodescanner

この時点で私はgradleを同期し、Android studios ...それが必要かどうかわからない（場合によってはrnpmリンクが改行文字を忘れることがある...エラーメッセージがある場合） Wordのインクルードについての理由は、これは... setting.gradleファイルでそれを見つけて、Wordのインクルードの前に新しい行を追加するためです。

これで使用できるようになりました。

インポート：

import BarcodeScanner from 'react-native-barcodescanner';

次に、それをレンダー関数のreturnステートメントで使用します。

<BarcodeScanner
    onBarCodeRead={this._BarCodeRead}
    style={styles.preview}
    torchMode='off'
    cameraType='back'
  />

詳細情報が必要な場合は、そのリンクを確認してください。これが、役に立たなかった古い図書館の後に私が図書館を通過するのに耐えた拷問を回避するのに役立つことを願っています。

幸せなコーディング！ :)

9
James Hollyer

React Native Community's React Native Camera を使用することをお勧めします。非常によく管理されており、コールバックプロップを渡して出力を受け取るだけです。

<RNCamera onBarCodeRead={this.handleBarCodeRead}></RNCamera>

カメラのビューでバーコードが検出されると、コールバックが呼び出されます。 ドキュメントから ：

イベントには、データ（バーコード内のデータ）とタイプ（検出されたバーコードのタイプ）が含まれます。

1
Theson

上下に移動するアニメーション化されたスキャンバーでスキャンエリアを強調表示でQRコードをスキャンするための反応ネイティブライブラリがあります。

isShowScanBarプロップを使用してスキャンバーを表示するか、このプロップにfalseを渡して無効にすることができます。

Githubリンク https://github.com/shifeng1993/react-native-qr-scanner#readme

npmもここにあります https://www.npmjs.com/package/react-native-qr-scanner

propsここにリストされています https://www.npmjs.com/package/react-native-qr-scanner#qrscanner

まず、このライブラリはライブラリに依存しているため、react-native-cameraライブラリをインストールします。

プロジェクトのルートディレクトリでこのコマンドを実行するだけですnpm i react-native-qr-scanner

次に、このlinkコマンドを実行しますreact-native link react-native-camera && react-native-qr-scanner

次を使用してインポートします：import {QRscanner} from 'react-native-qr-scanner';

 <QRscanner onRead={this.onRead}
    cornerBorderColor ='black'
    cornerRadius={40}
    isRepeatScan = {true}
    cornerBorderRadius={40}
    cornerColor ='black'
    scanBarColor='black'
    cornerBorderWidth={10}
    cornerBorderLength={60}
    hintText="Please Align QRCode"
    renderBottomView={this.bottomView} flashMode={this.state.flashMode}
    finderY={50}/>

 onRead = (res) => {
   alert(JSON.stringify(res))
}

両方で機能しますAndroidおよびiOS

1
Harshit Agrawal

js.coach は、ネイティブプラグインの反応を探すのに適した場所です

https://github.com/ideacreation/react-native-barcodescanner

https://github.com/leofidjeland/react-native-barcode

0
papacostas

Expo は BarCodeScanner コンポーネントをそのまま提供します（管理対象アプリにプリインストールされています）。

それは魅力のように機能します、私は間違いなくそれをお勧めします。

BarCodeScannerがバーコードで機能するかどうかを確認するには、スナックで試してください： https://snack.expo.io/@documentation/barcodescanner-example

0
hal

見つかったユニバーサルコードスキャナー-Androidとiosを組み合わせたもの： https://www.npmjs.com/package/react-native-barcode-scanner-universal

Androidで試したところ、問題なく動作しました。

0
Pavel Biryukov