webentwicklung-frage-antwort-db.com.de

Barcode-Scanning mit React native

Ich verwende eine native Kamera, um einen Barcode-Scanner für Android und iOS zu erstellen.

Ich kann den Barcode in iOS scannen, aber das Problem ist, dass die Scangrenze nicht sichtbar ist. Und ich möchte, dass der gesamte Bildschirm den Barcode nicht nur in der Mitte des Bildschirms scannen kann.

Gibt es eine Möglichkeit, es zu umgehen? Wenn es eine andere Bibliothek gibt, die auch für mich funktionieren würde.

8
Rohit Goyal

Nun, ich habe den ganzen Tag gebraucht, aber ich habe endlich eine funktionierende Bibliothek gefunden. Wenn hier jemand seinen Weg findet und nach einem Barcode-Scanner sucht, der auf Android funktioniert, bin ich hier, um Ihnen zu helfen.

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

1. Wenn Sie keine RPG haben, ist es sehr hilfreich! (Npm install -g rnpm) ( https://github.com/rnpm/rnpm - )

führen Sie dann diese Befehle in Ihrer Projektdatei aus:

npm install --save Reaktiver-Barcodescanner

rnpm link reaktiver-barcodescanner

an dieser stelle habe ich gradle synchronisiert und die app von den android studios reran ... nicht sicher, ob sie gebraucht wird (manchmal vergisst der rnpm link ein neues linienzeichen ... wenn sie eine fehlermeldung über das wort enthalten, dann liegt das daran. Finden Sie es in Ihrer Datei setting.gradle und fügen Sie vor dem Word-Include eine neue Zeile ein.

jetzt ist es einsatzbereit.

importiere es:

import BarcodeScanner from 'react-native-barcodescanner';

verwenden Sie es dann in der Rückgabeanweisung Ihrer Renderfunktion:

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

Wenn Sie weitere Informationen benötigen, überprüfen Sie diesen Link. Ich hoffe, dass dies jemandem geholfen hat, die Folter zu vermeiden, die ich nach einer alten Bibliothek, die nicht funktionierte, durch die Bibliothek ging.

Viel Spaß beim Codieren! :)

7
James Hollyer

Ich empfehle die Verwendung der React Native Community React Native Camera . Es ist ziemlich gut gepflegt und Sie können einfach eine Rückruf-Requisite übergeben, um die Ausgabe zu erhalten:

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

Ihr Rückruf wird ausgelöst, wenn in der Kameraansicht ein Barcode erkannt wird. Aus den Dokumenten :

Ereignis enthält Daten (die Daten im Barcode) und Typ (der Typ des erkannten Barcodes).

1
Theson

Es gibt eine reaktionsorientierte Bibliothek zum Scannen von QR-Codes mit Hervorheben des Scanbereichs mit einer animierten Scanleiste das bewegt sich auf und ab.

Sie können die Requisite isShowScanBar verwenden, um die Scanleiste anzuzeigen, oder sie deaktivieren, indem Sie false an diese Requisite übergeben.

Github Link https://github.com/shifeng1993/react-native-qr-scanner#readme

Es ist npm ist auch hier https://www.npmjs.com/package/react-native-qr-scanner

Es ist Requisiten sind hier aufgelistet https://www.npmjs.com/package/react-native-qr-scanner#qrscanner =

Installieren Sie zunächst die React-Native-Camera-Bibliothek, da diese Bibliothek davon abhängig ist.

Führen Sie einfach diesen Befehl im Stammverzeichnis Ihres Projekts npm i react-native-qr-scanner

dann führe diesen link Befehl react-native link react-native-camera && react-native-qr-scanner

Importiere es mit: 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))
}

Es funktioniert sowohl für Android als auch für iOS

1
Harshit Agrawal
0
papacostas

Expo bietet BarCodeScanner eine sofort einsatzbereite Komponente (in verwalteten Apps vorinstalliert).

Es funktioniert wie ein Zauber, ich kann es definitiv empfehlen.

Sie können sehen, ob BarCodeScanner mit Ihrem Barcode funktioniert. Probieren Sie es im Snack aus: https://snack.expo.io/@documentation/barcodescanner-example

0
hal

Gerade gefundener universeller Code-Scanner - kombiniert Android und iOS: https://www.npmjs.com/package/react-native-barcode-scanner-universal

Versucht auf Android funktioniert gut.

0
Pavel Biryukov