Costruisci uno scanner QR: un tutorial sulla fotocamera React Native

In questo tutorial React Native Camera, creeremo un'app per la lettura di codici QR. Sarà in grado di leggere i codici QR in tempo reale e renderne il contenuto sullo schermo al momento del rilevamento. Utilizzeremo CLI Quickstart di React Native.

(Nota: se hai bisogno di aiuto per configurarlo, puoi sempre fare riferimento alla pagina introduttiva di React Native: non dimenticare di fare clic sul pulsante "Avvio rapido CLI di React Native", poiché "Avvio rapido CLI di Expo" è preselezionato al momento di scrivere questo articolo.)

Perché reagire nativo?

React Native è un framework prezioso che prende in prestito il paradigma e i principi di progettazione di React per consentire uno sviluppo multipiattaforma fulmineo di UI scattanti. Facebook, Airbnb, Uber e molti altri hanno già le loro ultime app create con React Native.

Che cos'è la fotocamera React Native?

React Native Camera (RNCamera) è il componente di riferimento quando si tratta di implementare la funzionalità della fotocamera in un'app React Native. Questo componente ti aiuta a comunicare con il sistema operativo nativo attraverso alcune semplici funzioni in modo da poter utilizzare l'hardware del dispositivo. Puoi costruire le tue app attorno a queste funzioni senza entrare nel fastidio del codice nativo. RNCamera supporta già:

• Fotografie
• Video
• Riconoscimento facciale
• Scansione di codici a barre
• Riconoscimento del testo (solo Android)

Nota che RNCamera era disponibile in due versioni:

1. RNCamera
2. RCTCamera (obsoleta)

…quindi assicurati di usare RNCamera in modo da poter continuare a ricevere gli ultimi aggiornamenti.

Nota: React Native Camera è fortemente basato sul modulo della fotocamera Expo e andare avanti e indietro tra i due è piuttosto semplice.

Creare la tua prima app utilizzando RNCamera

Prima di iniziare il nostro scanner QR React Native, ci sono alcune dipendenze che dovremo installare.

Installazione delle dipendenze di RNCamera

La nostra configurazione richiede un minimo di JDK versione 1.7 (che molto probabilmente hai) e se sei su Android avrai bisogno di buildToolsVersion più recente di 25.0.2. (Per essere sicuri, c'è un elenco più dettagliato e aggiornato nei documenti.)

Per prima cosa iniziamo creando un nuovo progetto React Native:

 react-native init CameraExample

Ora distribuiamo la prima versione del nostro esempio React Native Camera sul nostro telefono.

 cd CameraExample react-native run-android

Dovrebbe assomigliare allo screenshot qui sotto:

Ora è il momento di installare il pacchetto react-native-camera nel nostro progetto. Utilizzeremo l'opzione "Installazione per lo più automatica con react-native". (Ci sono altri come Installazione per lo più automatica con CocoaPods e Installazione manuale, ma ci atterremo alla prima opzione, poiché è la più efficiente.) Esegui semplicemente:

 npm install react-native-camera --save react-native link react-native-camera

Devi anche aggiungere le seguenti autorizzazioni ad android/app/src/main/AndroidManifest.xml :

 package="com.cameraexample"> <uses-permission android:name="android.permission.INTERNET" /> + <uses-permission android:name="android.permission.CAMERA" /> + <uses-permission android:name="android.permission.RECORD_AUDIO"/> + <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> + <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <application android:name=".MainApplication"

Dovrai anche impostare la strategia di dimensione in android/app/build.gradle non ha un valore predefinito e riceverai un errore se non lo definisci:

 defaultConfig { applicationId "com.cameraexample" minSdkVersion rootProject.ext.minSdkVersion + missingDimensionStrategy 'react-native-camera', 'general' targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0"

Nota: la strategia di dimensione dovrebbe normalmente essere impostata su general come sopra. Tuttavia, puoi invece impostarlo su mlkit , se desideri utilizzare MLKit per il riconoscimento di testo/viso/codice a barre.

Dopo l'installazione, dovrai utilizzare run-android per installare le nuove dipendenze:

 react-native run-android

Se tutto è andato bene, dovresti vedere di nuovo la stessa schermata di benvenuto di React Native sul tuo dispositivo o simulatore.

Configurazione della fotocamera

Innanzitutto, iniziamo modificando App.js e importando RNCamera lì:

 import { RNCamera } from 'react-native-camera';

Successivamente, modificheremo la funzione di render per includere la nostra RNCamera appena importata. Notare l'attributo di style aggiunto alla fotocamera in modo che occupi lo schermo intero. Senza questi stili, potresti non essere in grado di vedere il rendering della fotocamera sullo schermo, poiché non occuperà spazio:

 render() { return ( <View style={styles.container}> - <Text style={styles.welcome}>Welcome to React Native!</Text> - <Text style={styles.instructions}>To get started, edit App.js</Text> - <Text style={styles.instructions}>{instructions}</Text> + <RNCamera + ref={ref => { + this.camera = ref; + }} + style={{ + flex: 1, + width: '100%', + }} + > + </RNCamera> </View> ); }

Dopo aver aggiunto questo codice, la tua interfaccia dovrebbe avere la fotocamera accesa, a schermo intero, proprio come lo screenshot qui sotto:

Ora possiamo vedere i codici a barre (come possiamo vedere i nostri codici QR di prova mostrati sul monitor sopra) ma non possiamo ancora leggerli. Usiamo l'algoritmo di RNCamera per riconoscere cosa c'è scritto all'interno di ciascuno di essi.

Lettura delle informazioni sui codici a barre

Per leggere le informazioni sui codici a barre, utilizzeremo il prop onGoogleVisionBarcodesDetected in modo da poter chiamare una funzione ed estrarre le informazioni. Aggiungiamolo nel componente <RNCamera> e colleghiamolo a una funzione barcodeRecognized per occuparcene. Si noti che onGoogleVisionBarcodesDetected restituisce un oggetto contenente la proprietà codici a barcodes , che contiene un array di tutti i codici a barre riconosciuti nella fotocamera.

Nota: la tecnologia del codice QR onGoogleVisionBarcodesDetected è disponibile solo su Android, ma se desideri un approccio multipiattaforma, è meglio utilizzare onBarCodeRead . Supporta solo un singolo codice a barre alla volta: l'utilizzo come fallback è lasciato come esercizio per il lettore.

Ecco come dovrebbe essere la nostra <RNCamera> dopo aver aggiunto onGoogleVisionBarcodesDetected :

 <RNCamera ref={ref => { this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > </RNCamera>

E ora possiamo gestire i codici a barre in App.js con la funzione seguente, che ci avviserà solo quando viene rilevato un codice a barre e dovrebbe mostrarne il contenuto sullo schermo:

 barcodeRecognized = ({ barcodes }) => { barcodes.forEach(barcode => console.warn(barcode.data)) };

Ecco come appare in azione:

Rendering di sovrapposizioni di codici a barre

La schermata precedente ora mostra le informazioni contenute nel codice a barre ma non ci permette di sapere quale messaggio appartiene a quale codice a barre. Per questo, approfondiremo i codici a barcodes restituiti da onGoogleVisionBarcodesDetected e cercheremo di individuare ciascuno dei codici a barre sul nostro schermo.

Ma prima, dovremo salvare i codici a barre riconosciuti nello stato in modo da potervi accedere ed eseguire un overlay basato sui dati contenuti. Ora modificheremo la nostra funzione precedentemente definita in modo che assomigli a questa:

 barcodeRecognized = ({ barcodes }) => this.setState({ barcodes });

Ora dovremo aggiungere un oggetto di state inizializzato a un array vuoto di codici a barre in modo che non crei errori nelle nostre funzioni di render :

 export default class App extends Component<Props> { state = { barcodes: [], } // ...

Creiamo ora la funzione renderBarCodes che dovrebbe essere aggiunta all'interno del componente <RNCamera> :

 <RNCamera ref={ref => { this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > {this.renderBarcodes()} </RNCamera>

Questa funzione dovrebbe ora prendere i codici a barre riconosciuti dallo stato e mostrarli sullo schermo:

 renderBarcodes = () => ( <View> {this.state.barcodes.map(this.renderBarcode)} </View> );

Si noti che la mappatura punta a renderBarcode che dovrebbe eseguire il rendering di ogni codice a barre sullo schermo. Ho aggiunto alcuni stili minori per poterli riconoscere facilmente:

 renderBarcode = ({ bounds, data }) => ( <React.Fragment key={data + bounds.origin.x}> <View style={{ borderWidth: 2, borderRadius: 10, position: 'absolute', borderColor: '#F00', justifyContent: 'center', backgroundColor: 'rgba(255, 255, 255, 0.9)', padding: 10, ...bounds.size, left: bounds.origin.x, top: bounds.origin.y, }} > <Text style={{ color: '#F00', flex: 1, position: 'absolute', textAlign: 'center', backgroundColor: 'transparent', }}>{data}</Text> </View> </React.Fragment> );

Ogni codice a barre riconosciuto ha:

• Una proprietà bounds per dirci dove sul nostro schermo è stato trovato il codice a barre, che useremo per renderizzare l'overlay per esso
• Una proprietà data che ci mostra cosa è codificato in quel codice a barre specifico
• Una proprietà di type che ci dice che tipo di codice a barre è (2D, QR, ecc.)

L'uso di questi tre parametri come abbiamo nella funzione di rendering sopra dà il seguente risultato:

Distribuzione multipiattaforma

Come accennato, RNCamera astrae le parti native del modulo della fotocamera in un linguaggio multipiattaforma universale. È importante notare che alcune delle funzionalità sarebbero disponibili solo su una piattaforma o potrebbero avere un modo diverso per essere scritte su un'altra. Per assicurarti che ciò che intendi costruire sia supportato su tutte le piattaforme di cui hai bisogno, assicurati di leggere sempre la documentazione come primo passo. Inoltre, è sempre meglio testare gli edge case su dispositivi diversi dopo aver completato l'implementazione, in modo da essere sicuri della robustezza del tuo prodotto.

Vai avanti e decodifica

Spero che questo piccolo assaggio di sviluppo della realtà aumentata sia stato utile e che ora tu abbia l'app di base React Native Camera in esecuzione sul tuo telefono o simulatore. Sentiti libero di lasciare un commento se hai domande o richieste!