Σε αυτό το σεμινάριο React Native Camera, θα δημιουργήσουμε μια εφαρμογή ανάγνωσης κώδικα QR. Θα είναι σε θέση να διαβάσει κωδικούς QR σε πραγματικό χρόνο και να αποδώσει το περιεχόμενό τους στην οθόνη κατά τη στιγμή της ανίχνευσης. Θα χρησιμοποιήσουμε το Quickstart CLI του React Native.
(Σημείωση: Εάν χρειάζεστε βοήθεια για τη ρύθμιση, μπορείτε πάντα να ανατρέξετε στο React εγγενής σελίδα έναρξης - μην ξεχάσετε να κάνετε κλικ στο κουμπί 'React Native CLI Quickstart', καθώς το 'Expo CLI Quickstart' έρχεται προεπιλεγμένο κατά τη στιγμή της σύνταξης αυτού του άρθρου.)
Γιατί να αντιδράσεις εγγενείς;
Αντιδράστε εγγενείς είναι ένα πολύτιμο πλαίσιο που δανείζεται το πρότυπο και τις αρχές σχεδίασης της React για να επιτρέψει την ταχεία και γρήγορη ανάπτυξη πολλαπλών πλατφορμών UI. Facebook, Airbnb, Uber και πολλά άλλα έχουν ήδη δημιουργήσει τις πιο πρόσφατες εφαρμογές τους με το React Native.
Το μέγεθος επεξεργασίας δεν μπορεί να χρησιμοποιηθεί εδώ
Τι είναι το React Native Camera;
Το React Native Camera (RNCamera) είναι ο μεταβείτε στο στοιχείο για την εφαρμογή της λειτουργικότητας της κάμερας σε μια εφαρμογή React Native. Αυτό το στοιχείο σάς βοηθά να επικοινωνείτε με το εγγενές λειτουργικό σύστημα μέσω ορισμένων απλών λειτουργιών, ώστε να μπορείτε να χρησιμοποιείτε υλικό συσκευής. Μπορείτε να δημιουργήσετε τις εφαρμογές σας γύρω από αυτές τις λειτουργίες χωρίς να μπείτε στην ταλαιπωρία του εγγενούς κώδικα. Το RNCamera υποστηρίζει ήδη:
- Φωτογραφίες
- Βίντεο
- Ανίχνευση προσώπου
- Σάρωση γραμμωτού κώδικα
- Αναγνώριση κειμένου (μόνο για Android)
Σημειώστε ότι το RNCamera συνήθιζε να έρχεται σε δύο γεύσεις:
- RNCamera
- RCTCamera (καταργήθηκε)
… Γι 'αυτό φροντίστε να χρησιμοποιήσετε το RNCamera έτσι ώστε να μπορείτε να συνεχίσετε να λαμβάνετε τις πιο πρόσφατες ενημερώσεις.
Σημείωση: Το React Native Camera βασίζεται σε μεγάλο βαθμό στη μονάδα κάμερας Expo και να πηγαίνουμε μπρος-πίσω μεταξύ των δύο είναι πολύ εύκολο.
Δημιουργία της πρώτης σας εφαρμογής χρησιμοποιώντας το RNCamera
Πριν ξεκινήσουμε τον σαρωτή React Native QR, υπάρχουν ορισμένες εξαρτήσεις που πρέπει να εγκαταστήσουμε.
Εγκατάσταση των εξαρτήσεων του RNCamera
Η εγκατάστασή μας χρειάζεται τουλάχιστον JDK έκδοση 1.7 (την οποία πιθανότατα έχετε) και εάν χρησιμοποιείτε Android θα χρειαστείτε buildToolsVersion νεότερο από 25.0.2. (Για να είμαστε σίγουροι, υπάρχει μια πιο λεπτομερή και ενημερωμένη λίστα στα έγγραφα .)
Αρχικά ας ξεκινήσουμε δημιουργώντας ένα νέο έργο React Native:
react-native init CameraExample Τώρα ας αναπτύξουμε την πρώτη έκδοση του παραδείγματος React Native Camera μέσω του τηλεφώνου μας.
cd CameraExample react-native run-android Θα πρέπει να μοιάζει με το παρακάτω στιγμιότυπο οθόνης:
Τώρα ήρθε η ώρα να εγκαταστήσετε το react-native-camera πακέτο στο έργο μας. Θα χρησιμοποιήσουμε την επιλογή 'Κυρίως αυτόματη εγκατάσταση με αντιδραστήρια'. (Υπάρχουν άλλοι σαν Κυρίως αυτόματη εγκατάσταση με CocoaPods και Μη αυτόματη εγκατάσταση , αλλά θα εμμείνουμε στην πρώτη επιλογή, καθώς είναι η πιο αποτελεσματική.) Απλώς εκτελέστε:
npm install react-native-camera --save react-native link react-native-camera Πρέπει επίσης να προσθέσετε τα ακόλουθα δικαιώματα στο android/app/src/main/AndroidManifest.xml:
package='com.cameraexample'> + + + + Θα πρέπει επίσης να ορίσετε τη στρατηγική διάστασης σε android/app/build.gradle —δεν έχει προεπιλογή και θα λάβετε ένα σφάλμα εάν δεν το ορίσετε :
defaultConfig { applicationId 'com.cameraexample' minSdkVersion rootProject.ext.minSdkVersion + missingDimensionStrategy 'react-native-camera', 'general' targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName '1.0' Σημείωση: Η στρατηγική διάστασης πρέπει κανονικά να οριστεί σε general όπως παραπάνω. Ωστόσο, μπορείτε να το ορίσετε σε mlkit Αντίθετα, αν θέλετε χρησιμοποιήστε το MLKit για αναγνώριση κειμένου / προσώπου / γραμμωτού κώδικα .
μικτή πραγματικότητα έναντι επαυξημένης πραγματικότητας
Μετά την εγκατάσταση, θα πρέπει να χρησιμοποιήσετε το run-android για να εγκαταστήσετε τις νέες εξαρτήσεις:
react-native run-android Εάν όλα πήγαν καλά, θα πρέπει να δείτε ξανά την ίδια οθόνη υποδοχής React Native στη συσκευή ή τον προσομοιωτή σας.
Ρύθμιση της κάμερας
Αρχικά, ας ξεκινήσουμε τροποποιώντας App.js και εισαγωγή RNCamera εκεί:
import { RNCamera } from 'react-native-camera'; Στη συνέχεια, θα τροποποιήσουμε το render λειτουργία για να συμπεριλάβουμε τα πρόσφατα εισαγόμενα RNCamera. Παρατηρήστε το style προστέθηκε ένα χαρακτηριστικό στην κάμερα για να πάρει την πλήρη οθόνη. Χωρίς αυτά τα στυλ, ενδέχεται να μην μπορείτε να δείτε την απόδοση της κάμερας στην οθόνη σας, καθώς δεν θα καταλαμβάνει κανένα χώρο:
render() { return ( - Welcome to React Native! - To get started, edit App.js - {instructions} + { + this.camera = ref; + }} + style={{ + flex: 1, + width: '100%', + }} + > + ); } Μετά την προσθήκη αυτού του κωδικού, η διεπαφή σας θα πρέπει να έχει την κάμερα σε πλήρη οθόνη, ακριβώς όπως το παρακάτω στιγμιότυπο οθόνης:
Τώρα μπορούμε να δούμε γραμμωτούς κώδικες (όπως μπορούμε να δούμε τους δοκιμαστικούς κωδικούς QR που εμφανίζονται στην οθόνη παραπάνω), αλλά δεν μπορούμε να τους διαβάσουμε ακόμα. Ας χρησιμοποιήσουμε τον αλγόριθμο RNCamera για να αναγνωρίσουμε τι είναι γραμμένο σε κάθε ένα από αυτά.
Οι συναρτήσεις c++ εκτός από τις κύριες εκτελούνται:
Ανάγνωση πληροφοριών γραμμωτού κώδικα
Για να διαβάσουμε πληροφορίες γραμμωτού κώδικα, θα χρησιμοποιήσουμε το onGoogleVisionBarcodesDetected στήριξη, ώστε να μπορούμε να καλέσουμε μια συνάρτηση και να εξαγάγουμε τις πληροφορίες. Ας το προσθέσουμε στο στοιχείο και να το συνδέσουμε με ένα barcodeRecognized λειτουργούν για να το φροντίσουν. Σημειώστε ότι onGoogleVisionBarcodesDetected επιστρέφει ένα αντικείμενο που περιέχει το barcodes ιδιότητα, η οποία περιέχει μια σειρά από όλους τους γραμμωτούς κωδικούς που αναγνωρίζονται στην κάμερα.
Σημείωση: Το onGoogleVisionBarcodesDetected Η τεχνολογία κωδικού QR είναι διαθέσιμη μόνο σε Android, αλλά αν θέλετε μια προσέγγιση μεταξύ πλατφορμών, καλύτερα να ακολουθήσετε το onBarCodeRead. Υποστηρίζει μόνο έναν γραμμικό κώδικα κάθε φορά - η χρήση του ως εναλλακτικό αφήνεται ως άσκηση για τον αναγνώστη.
Δείτε πώς θα πρέπει να προσέχουμε μετά την προσθήκη onGoogleVisionBarcodesDetected:
{ this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > Και τώρα μπορούμε να χειριστούμε τους γραμμικούς κωδικούς στο App.js με την παρακάτω λειτουργία, η οποία θα μας προειδοποιεί μόνο όταν ανιχνεύεται γραμμικός κώδικας και θα πρέπει να εμφανίζει το περιεχόμενό του στην οθόνη:
πρότυπο τεχνικών προδιαγραφών για την ανάπτυξη λογισμικού
barcodeRecognized = ({ barcodes }) => { barcodes.forEach(barcode => console.warn(barcode.data)) }; Δείτε πώς φαίνεται σε δράση:
Απόδοση επικαλύψεων γραμμωτού κώδικα
Το προηγούμενο στιγμιότυπο οθόνης δείχνει τώρα τις πληροφορίες που περιέχονται στον γραμμικό κώδικα, αλλά δεν μας επιτρέπει να γνωρίζουμε ποιο μήνυμα ανήκει σε ποιον γραμμικό κώδικα. Για αυτό, θα προχωρήσουμε βαθύτερα στο barcodes επέστρεψε από onGoogleVisionBarcodesDetected και προσπαθήστε να εντοπίσετε καθένα από τους γραμμικούς κώδικες στην οθόνη μας.
Αλλά πρώτα, θα πρέπει να αποθηκεύσουμε τους αναγνωρισμένους γραμμωτούς κώδικες στην κατάσταση έτσι ώστε να έχουμε πρόσβαση σε αυτό και να κάνουμε μια επικάλυψη με βάση τα περιεχόμενα δεδομένα. Τώρα θα τροποποιήσουμε τη λειτουργία που ορίσαμε προηγουμένως ώστε να μοιάζει με αυτήν:
barcodeRecognized = ({ barcodes }) => this.setState({ barcodes }); Θα χρειαστεί τώρα να προσθέσουμε ένα state αντικείμενο που αρχικοποιήθηκε σε έναν κενό πίνακα γραμμικών κωδίκων, ώστε να μην δημιουργεί σφάλματα στο render λειτουργίες:
export default class App extends Component { state = { barcodes: [], } // ... Ας δημιουργήσουμε τώρα το renderBarCodes συνάρτηση που πρέπει να προστεθεί μέσα στο στοιχείο:
{ this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > {this.renderBarcodes()} Αυτή η συνάρτηση πρέπει τώρα να λάβει τους γραμμωτούς κωδικούς που αναγνωρίζονται από την πολιτεία και να τους εμφανίσει στην οθόνη:
renderBarcodes = () => ( {this.state.barcodes.map(this.renderBarcode)} ); Παρατηρήστε ότι η χαρτογράφηση επισημαίνεται στο renderBarcode που θα πρέπει να αποδίδει κάθε γραμμωτό κώδικα στην οθόνη. Έχω προσθέσει ένα μικρό στυλ για να μπορούμε να τα αναγνωρίζουμε εύκολα:
renderBarcode = ({ bounds, data }) => ( {data} ); Κάθε αναγνωρισμένος γραμμωτός κώδικας έχει:
llc τύπου s ή c
- Α
bounds ιδιότητα για να μας πείτε πού στην οθόνη μας βρέθηκε ο γραμμωτός κώδικας, τον οποίο θα χρησιμοποιήσουμε για να αποδώσουμε την επικάλυψη για αυτόν - Α
data ιδιότητα που μας δείχνει τι κωδικοποιείται σε αυτόν τον συγκεκριμένο γραμμωτό κώδικα - Α
type ιδιότητα που μας λέει τι είδους γραμμωτός κώδικας είναι (2D, QR κ.λπ.)
Η χρήση αυτών των τριών παραμέτρων όπως έχουμε στη λειτουργία απόδοσης παραπάνω δίνει το ακόλουθο αποτέλεσμα:
Ανάπτυξη μεταξύ πλατφορμών
Όπως αναφέρθηκε, το RNCamera αφαιρεί τα εγγενή μέρη της μονάδας κάμερας σε μια καθολική γλώσσα πολλαπλών πλατφορμών. Είναι σημαντικό να σημειωθεί ότι ορισμένες από τις λειτουργίες θα είναι διαθέσιμες μόνο σε μια πλατφόρμα ή μπορεί να έχουν διαφορετικό τρόπο να γραφτούν σε άλλη. Για να βεβαιωθείτε ότι αυτό που σκοπεύετε να δημιουργήσετε υποστηρίζεται σε όλες τις πλατφόρμες που χρειάζεστε, φροντίστε να διαβάζετε πάντα το τεκμηρίωση ως πρώτο βήμα. Επιπλέον, είναι πάντα καλύτερο ελέγξτε τις θήκες σε διαφορετικές συσκευές αφού ολοκληρώσετε την εφαρμογή σας, ώστε να είστε σίγουροι για την ανθεκτικότητα του προϊόντος σας.
Προχωρήστε και αποκωδικοποιήστε
Ελπίζω αυτή τη μικρή γεύση ανάπτυξη επαυξημένης πραγματικότητας ήταν χρήσιμη και τώρα έχετε τη βασική εφαρμογή React Native Camera που εκτελείται στο τηλέφωνο ή στον προσομοιωτή σας. Μη διστάσετε να αφήσετε ένα σχόλιο εάν έχετε οποιεσδήποτε ερωτήσεις ή αιτήματα!
Σχετίζεται με: Μια κρύα κατάδυση στο React Native (Tutorial για αρχάριους) Κατανόηση των βασικών
Τι είναι ο κωδικός QR και πώς λειτουργεί;
Ο κωδικός QR είναι ένας δισδιάστατος γραμμικός κώδικας που έχει σχεδιαστεί για γρήγορη ανάγνωση από οποιαδήποτε κάμερα υπολογιστή. Σε αυτό το σεμινάριο, δημιουργούμε μια εφαρμογή ανάγνωσης κωδικού QR βασισμένη στο RNCamera, η οποία θα μπορεί να διαβάζει κωδικούς QR σε πραγματικό χρόνο και να αποδίδει το περιεχόμενό τους στην οθόνη κατά τη στιγμή της ανίχνευσης.
Είναι εύκολο να μάθετε το React Native;
Το React Native βασίζεται σε JavaScript που διευκολύνει την εκμάθηση / εντοπισμό σφαλμάτων από το Java, Objective-C ή Swift. (Αυτό το καθιστά πολύ καλό υποψήφιο για μια εφαρμογή ανάγνωσης κώδικα QR γρήγορης εκκίνησης.) Ωστόσο, συνιστάται να γνωρίζετε τουλάχιστον μια αυστηρή γλώσσα για να ελαχιστοποιήσετε τα σφάλματα και να μεγιστοποιήσετε την απόδοση.
Είναι το React Native το μέλλον;
Το React Native έχει σχεδιαστεί για να είναι ανθεκτικό στο μέλλον λόγω συμβατότητας μεταξύ πλατφορμών, εγγενών λειτουργιών, άμεσων ζωντανών ενημερώσεων και της απαλής καμπύλης εκμάθησης. Αυτό καθιστά το RNCamera μια καλή επιλογή για τη δημιουργία μιας ισχυρής εφαρμογής ανάγνωσης κώδικα QR, καθώς σας βοηθά να επικοινωνείτε με το εγγενές λειτουργικό σύστημα μέσω κάποιων απλών λειτουργιών.
Είναι το React Native καλό για την ανάπτυξη εφαρμογών για κινητά;
Ναί. Το React Native επιτρέπει γρήγορες επαναλήψεις χωρίς να περιμένετε μεγάλες εκδόσεις. Κατασκευασμένες σωστά, οι εφαρμογές React Native Camera προορίζονται να κλιμακώνονται εύκολα και να αποδίδουν όμορφα μεταξύ πλατφορμών.
Χρησιμοποιείται συνήθως η React Native Camera;
Το React Native Camera (RNCamera) είναι το στοιχείο μετάβασης στην εφαρμογή της λειτουργικότητας της κάμερας σε μια εφαρμογή React Native. Μπορείτε να δημιουργήσετε τις εφαρμογές σας γύρω από αυτές τις λειτουργίες χωρίς να μπείτε στην ταλαιπωρία του εγγενούς κώδικα.
