Namestitev Djanga v IIS: Vadnica po korakih
Podatkovne Vede In Zbirke Podatkov
Mobilni
Zgradite QR skener: Vadnica za reagiranje nativne kamere
V tej vadnici React Native Camera bomo ustvarili aplikacijo za branje kode QR. QR kode bo lahko prebral v realnem času in njihovo vsebino upodobil na zaslon v trenutku zaznavanja. Uporabili bomo React Native CLI Quickstart.
(Opomba: če potrebujete pomoč pri nastavitvi, se lahko vedno obrnete na Stran React Native Getting Started —Ne pozabite klikniti gumba »React Native CLI Quickstart«, saj je »Expo CLI Quickstart« v času pisanja tega članka prednastavljen.)
Zakaj reagirati native?
Reagiraj Native je dragocen okvir, ki si sposoja React-ovo paradigmo in načela oblikovanja, da omogoča bliskovit hiter, medplatformni razvoj hitrih uporabniških vmesnikov. Facebook, Airbnb, Uber in mnogi drugi že imajo svoje najnovejše aplikacije, zgrajene z React Native.
najbolj priljubljene aplikacije za zmenke 2017
Kaj je React Native Camera?
React Native Camera (RNCamera) je go-to komponenta, ko gre za izvajanje funkcije kamere v aplikaciji React Native. Ta komponenta vam pomaga z nekaj preprostimi funkcijami komunicirati z domačim OS, tako da lahko uporabljate strojno opremo naprave. Aplikacije lahko gradite okoli teh funkcij, ne da bi se lotili težav z izvorno kodo. RNCamera že podpira:
- Fotografije
- Video posnetki
- Zaznavanje obrazov
- Optično branje črtne kode
- Prepoznavanje besedila (samo Android)
Upoštevajte, da je imela RNCamera včasih dva okusa:
- RNCamera
- RCTCamera (zastarelo)
… Zato uporabljajte RNCamera, da boste lahko še naprej prejemali najnovejše posodobitve.
Opomba: React Native Camera močno temelji na modulu kamere Expo in naprej in nazaj med obema je precej enostavno.
Ustvarjanje prve aplikacije z uporabo RNCamera
Preden začnemo z bralnikom QR React Native QR, bomo morali namestiti nekaj odvisnosti.
Nameščanje odvisnosti RNCamere
Za našo namestitev potrebujemo vsaj JDK različice 1.7 (ki jo imate najverjetneje) in če uporabljate Android, boste potrebovali buildToolsVersion novejši od 25.0.2. (Seveda obstaja podrobnejši in posodobljen seznam v dokumentih .)
Najprej začnimo z ustvarjanjem novega projekta React Native:
react-native init CameraExample Zdaj pa postavimo prvo različico našega primera React Native Camera prek našega telefona.
cd CameraExample react-native run-android Izgledati mora kot spodnji posnetek zaslona:
Zdaj je čas, da namestite react-native-camera paket v našem projektu. Uporabili bomo možnost »Večinoma samodejna namestitev z reakcijskim izvornim«. (Obstajajo tudi drugi podobni Večinoma samodejna namestitev s CocoaPods in Ročna namestitev , vendar se bomo držali prve možnosti, saj je najučinkovitejša.) Preprosto zaženite:
kakšna je razlika med s corp in c corp
npm install react-native-camera --save react-native link react-native-camera V android/app/src/main/AndroidManifest.xml morate dodati tudi naslednja dovoljenja:
package='com.cameraexample'> + + + + Strategijo razsežnosti boste morali nastaviti tudi v android/app/build.gradle - ni privzeta in če ga ne definirate, boste dobili napako :
defaultConfig { applicationId 'com.cameraexample' minSdkVersion rootProject.ext.minSdkVersion + missingDimensionStrategy 'react-native-camera', 'general' targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName '1.0' Opomba: Strategija dimenzij mora biti običajno nastavljena na general kot zgoraj. Lahko pa jo nastavite na mlkit namesto tega, če želite uporabite MLKit za prepoznavanje besedila / obraza / črtne kode .
Po namestitvi boste morali uporabiti run-android za namestitev novih odvisnosti:
react-native run-android Če je šlo vse v redu, bi morali v svoji napravi ali simulatorju spet videti isti pozdravni zaslon React Native.
Nastavitev kamere
Najprej začnimo s spreminjanjem App.js in uvoz RNCamera tam:
import { RNCamera } from 'react-native-camera'; Nato bomo spremenili render funkcija za vključitev naših novo uvoženih RNCamera. Opazite style atribut, dodan kameri, da zajame celozaslonski posnetek. Brez teh stilov fotoaparata morda ne boste mogli videti na zaslonu, saj ne bo zasedel prostora:
render() { return ( - Welcome to React Native! - To get started, edit App.js - {instructions} + { + this.camera = ref; + }} + style={{ + flex: 1, + width: '100%', + }} + > + ); } Po dodajanju te kode mora imeti vaš vmesnik vklopljeno kamero v celozaslonskem načinu, tako kot spodnja slika zaslona:
kako se prijaviti v python
Zdaj lahko vidimo črtne kode (kot vidimo testne QR kode, ki se prikazujejo na zgornjem monitorju), vendar jih še ne moremo prebrati. Uporabimo algoritem RNCamera, da prepoznamo, kaj je zapisano znotraj vsakega od njih.
Branje informacij o črtni kodi
Za branje informacij o črtni kodi bomo uporabili onGoogleVisionBarcodesDetected prop, tako da lahko pokličemo funkcijo in pridobimo informacije. Dodajmo to v komponento in jo povežemo z barcodeRecognized funkcija, ki skrbi za to. Upoštevajte, da onGoogleVisionBarcodesDetected vrne objekt, ki vsebuje barcodes lastnost, ki vsebuje niz vseh črtnih kod, prepoznanih v kameri.
Opomba: The onGoogleVisionBarcodesDetected Tehnologija QR kode je na voljo samo v Androidu, če pa želite pristop med različnimi platformami, raje uporabite onBarCodeRead Naenkrat podpira samo eno črtno kodo - uporaba kot nadomestna možnost je ostala kot vaja za bralca.
Evo, kako naj izgledajo naši po dodajanju onGoogleVisionBarcodesDetected:
{ this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > In zdaj lahko obdelujemo črtne kode v App.js s spodnjo funkcijo, ki nas bo opozorila šele, ko bo zaznana črtna koda in bi morala na zaslonu prikazati njeno vsebino:
barcodeRecognized = ({ barcodes }) => { barcodes.forEach(barcode => console.warn(barcode.data)) }; Takole je videti v akciji:
Prikaz slojev črtne kode
Prejšnji posnetek zaslona zdaj prikazuje informacije, ki jih vsebuje črtna koda, vendar nam ne omogoča vedeti, katero sporočilo pripada kateri črtni kodi. Za to bomo šli globlje v barcodes vrnjeno iz onGoogleVisionBarcodesDetected in poskusite natančno določiti vsako od črtnih kod na našem zaslonu.
Najprej bomo morali prepoznane črtne kode shraniti v stanje, da bomo lahko dostopali do njega in upodobili prosojnico na podlagi vsebovanih podatkov. Zdaj bomo spremenili svojo predhodno določeno funkcijo, da bo videti tako:
barcodeRecognized = ({ barcodes }) => this.setState({ barcodes }); Zdaj bomo morali dodati state objekt, inicializiran v prazno polje črtnih kod, tako da ne ustvarja napak v naših render funkcije:
export default class App extends Component { state = { barcodes: [], } // ... Ustvarimo zdaj renderBarCodes funkcija, ki jo je treba dodati znotraj komponente:
{ this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > {this.renderBarcodes()} Ta funkcija mora zdaj prevzeti črtne kode, ki jih prepozna država, in jih prikazati na zaslonu:
renderBarcodes = () => ( {this.state.barcodes.map(this.renderBarcode)} ); Opazite, da je preslikava usmerjena na renderBarcode ki naj upodobi vsako črtno kodo na zaslonu. Dodal sem nekaj manjših stylingov, da jih bomo lahko zlahka prepoznali:
s-corporation vs c-corporation
renderBarcode = ({ bounds, data }) => ( {data} ); Vsaka prepoznana črtna koda ima:
- A
bounds lastnost, da nam pove, kje na našem zaslonu je bila najdena črtna koda, ki jo bomo uporabili za upodobitev prosojnice zanjo - A
data lastnost, ki nam pokaže, kaj je kodirano v tej določeni črtni kodi - A
type lastnost, ki nam pove, za katero vrsto črtne kode gre (2D, QR itd.)
Uporaba teh treh parametrov, kot jih imamo v zgornji funkciji upodabljanja, daje naslednji rezultat:
Uvajanje med različnimi platformami
Kot smo že omenili, RNCamera povzema izvorne dele modula kamere v univerzalni jezik med različnimi platformami. Pomembno je omeniti, da bi bile nekatere funkcije na voljo samo na eni platformi ali pa bi jih lahko drugače zapisali na drugi. Če želite zagotoviti, da je tisto, kar nameravate zgraditi, podprto na vseh platformah, ki jih potrebujete, vedno preberite dokumentacijo kot prvi korak. Poleg tega je vedno bolje preizkusite robne primere na različnih napravah po končani izvedbi, tako da ste prepričani o robustnosti izdelka.
Pojdi naprej in dekodiraj
Upam, da ta majhen okus razvoj razširjene resničnosti je bilo koristno in da imate zdaj v telefonu ali simulatorju osnovno aplikacijo React Native Camera. Če imate kakršna koli vprašanja ali zahteve, lahko spustite komentar!
Sorodno: Hladen potop v React Native (Vadnica za začetnike) Razumevanje osnov
Kaj je QR koda in kako deluje?
Koda QR je dvodimenzionalna črtna koda, ki je zasnovana za hitro branje s katero koli računalniško kamero. V tej vadnici ustvarimo aplikacijo za branje QR-kode, ki temelji na RNCamera, ki bo lahko v realnem času prebirala QR kode in njihovo vsebino upodabljala na zaslon v času zaznavanja.
Se je React Native enostavno naučiti?
React Native temelji na JavaScriptu, ki olajša učenje / odpravljanje napak kot Java, Objective-C ali Swift. (Zaradi tega je zelo dober kandidat za hiter zagon aplikacije za branje QR-kode.) Priporočamo pa, da poznate vsaj en strog jezik, da zmanjšate napake in povečate zmogljivost.
funkcionalni dokumenti so namenjeni
Je React Native prihodnost?
React Native je zasnovan tako, da je odporen na prihodnost zaradi združljivosti z različnimi platformami, izvorne funkcionalnosti, takojšnjih posodobitev v živo in nežne učne krivulje. Zaradi tega je RNCamera dobra izbira za izdelavo robustne aplikacije za branje QR-kode, saj vam z nekaj preprostimi funkcijami pomaga komunicirati z domačim OS.
Ali je React Native dober za razvoj aplikacij za mobilne naprave?
Da. React Native omogoča hitre ponovitve brez čakanja na dolge gradnje. Pravilno zgrajene aplikacije React Native Camera so namenjene preprostemu merjenju in lepemu delovanju na več platformah.
Ali se React Native Camera pogosto uporablja?
React Native Camera (RNCamera) je sestavni del, ko gre za izvajanje funkcij kamere v aplikaciji React Native. Aplikacije lahko gradite okoli teh funkcij, ne da bi se lotili težav z izvorno kodo.
