Bir QR Tarayıcı Oluşturun: Bir React Yerel Kamera Eğitimi

Bu React Native Camera eğitiminde, bir QR kod okuyucu uygulaması oluşturacağız. QR kodlarını gerçek zamanlı olarak okuyabilecek ve algılama anında içeriğini ekrana aktarabilecektir. React Native'in CLI Quickstart'ını kullanacağız.

(Not: Bunu ayarlamak için yardıma ihtiyacınız olursa, her zaman React Native Başlarken sayfasına başvurabilirsiniz; “React Native CLI Quickstart” düğmesine tıklamayı unutmayın, çünkü o sırada “Expo CLI Quickstart” önceden seçilmiş olarak gelir. Bu makaleyi yazarken.)

Neden React Native?

React Native, hızlı kullanıcı arayüzlerinin yıldırım hızında, platformlar arası geliştirilmesini sağlamak için React'in paradigmasını ve tasarım ilkelerini ödünç alan değerli bir çerçevedir. Facebook, Airbnb, Uber ve diğerleri, React Native ile oluşturulmuş en yeni uygulamalarına sahipler.

React Native Camera Nedir?

React Native Camera (RNCamera), bir React Native uygulamasında kamera işlevselliğinin uygulanması söz konusu olduğunda gidilecek bileşendir. Bu bileşen, aygıt donanımını kullanabilmeniz için bazı basit işlevler aracılığıyla yerel işletim sistemiyle iletişim kurmanıza yardımcı olur. Uygulamalarınızı yerel kod karmaşasına girmeden bu işlevler etrafında oluşturabilirsiniz. RNCamera zaten şunları desteklemektedir:

• Fotoğraflar
• videolar
• Yüz tanıma
• Barkod tarama
• Metin tanıma (yalnızca Android)

RNCamera'nın eskiden iki çeşide sahip olduğunu unutmayın:

1. RNKamera
2. RTCCamera (kullanımdan kaldırıldı)

…bu yüzden en son güncellemeleri almaya devam edebilmek için RNCamera'yı kullandığınızdan emin olun.

Not: React Native Camera, ağırlıklı olarak Expo kamera modülüne dayalıdır ve ikisi arasında gidip gelmek oldukça kolaydır.

RNCamera Kullanarak İlk Uygulamanızı Oluşturma

React Native QR tarayıcımıza başlamadan önce, yüklememiz gereken bazı bağımlılıklar var.

RNCamera'nın Bağımlılıklarını Yükleme

Kurulumumuz minimum JDK sürüm 1.7'ye ihtiyaç duyar (büyük olasılıkla sahip olduğunuz) ve Android kullanıyorsanız, buildToolsVersion daha yeni buildToolsVersion gerekir. (Emin olun, belgelerde daha ayrıntılı ve güncel bir liste var.)

Öncelikle yeni bir React Native projesi oluşturarak başlayalım:

 react-native init CameraExample

Şimdi React Native Camera örneğimizin ilk sürümünü telefonumuza yerleştirelim.

 cd CameraExample react-native run-android

Aşağıdaki ekran görüntüsü gibi görünmelidir:

Şimdi projemize react-native-camera paketini kurmanın zamanı geldi. “Çoğunlukla yerel tepki ile otomatik yükleme” seçeneğini kullanacağız. (Çoğunlukla CocoaPods ile otomatik yükleme ve Elle yükleme gibi başkaları da vardır, ancak en verimlisi olduğu için ilk seçeneğe bağlı kalacağız.) Basitçe çalıştırın:

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

android/app/src/main/AndroidManifest.xml aşağıdaki izinleri de eklemelisiniz:

 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"

Ayrıca boyut stratejisini android/app/build.gradle ayarlamanız gerekir — varsayılanı yoktur ve tanımlamazsanız bir hata alırsınız:

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

Not: Boyut stratejisi normalde yukarıdaki gibi general olarak ayarlanmalıdır. Ancak, metin/yüz/barkod tanıma için MLKit'i kullanmak isterseniz, bunun yerine mlkit olarak ayarlayabilirsiniz.

Kurulumdan sonra, yeni bağımlılıkları kurmak için run-android kullanmanız gerekecek:

 react-native run-android

Her şey yolunda gittiyse, cihazınızda veya simülatörünüzde aynı React Native karşılama ekranını tekrar görmelisiniz.

Kamerayı Ayarlama

İlk olarak, App.js değiştirerek ve RNCamera buraya aktararak başlayalım:

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

Ardından, yeni içe aktarılan RNCamera içerecek şekilde render işlevini değiştireceğiz. Tam ekranı alabilmesi için kameraya eklenen style özelliğine dikkat edin. Bu stiller olmadan, herhangi bir yer kaplamadığı için kamera görüntüsünü ekranınızda göremeyebilirsiniz:

 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> ); }

Bu kodu ekledikten sonra, arayüzünüz aşağıdaki ekran görüntüsünde olduğu gibi kamerayı tam ekran olarak açmalıdır:

Artık barkodları görebiliyoruz (yukarıdaki monitörde test QR kodlarımızı gördüğümüz gibi) ancak henüz okuyamıyoruz. Her birinin içinde ne yazdığını tanımak için RNCamera'nın algoritmasını kullanalım.

Barkod Bilgilerini Okuma

Barkod bilgilerini okumak için onGoogleVisionBarcodesDetected kullanacağız, böylece bir fonksiyon çağırabilir ve bilgileri çıkarabiliriz. Bunu <RNCamera> bileşenine ekleyelim ve halletmek için onu bir barcodeRecognized işlevine bağlayalım. onGoogleVisionBarcodesDetected , kamerada tanınan tüm barkodların bir dizisini içeren barcodes özelliğini içeren bir nesne döndürdüğünü unutmayın.

Not: onGoogleVisionBarcodesDetected QR kod teknolojisi yalnızca Android'de kullanılabilir, ancak platformlar arası bir yaklaşım istiyorsanız onBarCodeRead daha iyi olur. Bir seferde yalnızca tek bir barkodu destekler; bunun bir geri dönüş olarak kullanılması okuyucu için bir alıştırma olarak bırakılır.

GoogleVisionBarcodesDetected öğesini ekledikten sonra <RNCamera> nasıl görünmesi gerektiği onGoogleVisionBarcodesDetected :

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

Ve artık App.js barkodları, yalnızca bir barkod algılandığında bizi uyaracak ve içeriğini ekranda göstermesi gereken aşağıdaki fonksiyonla işleyebiliriz:

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

İşte nasıl göründüğü:

Barkod Bindirmeleri Oluşturma

Bir önceki ekran görüntüsü artık barkodun içerdiği bilgileri gösteriyor ancak hangi mesajın hangi barkoda ait olduğunu bilmemize izin vermiyor. Bunun için onGoogleVisionBarcodesDetected döndürülen barcodes daha derinlemesine inceleyeceğiz ve ekranımızdaki barkodların her birini tam olarak belirlemeye çalışacağız.

Ancak önce, tanınan barkodları duruma kaydetmemiz gerekecek, böylece ona erişebilir ve içerilen verilere dayalı bir kaplama oluşturabiliriz. Şimdi daha önce tanımlanmış fonksiyonumuzu şöyle görünecek şekilde değiştireceğiz:

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

Şimdi, render işlevlerimizde herhangi bir hata oluşturmaması için boş bir barkod dizisine başlatılan bir state nesnesi eklememiz gerekecek:

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

Şimdi <RNCamera> bileşeninin içine eklenmesi gereken renderBarCodes işlevini oluşturalım:

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

Bu fonksiyon şimdi durumdan tanınan barkodları almalı ve ekranda göstermelidir:

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

Eşlemenin, ekranda her bir barkodu oluşturması gereken renderBarcode yönlendirildiğine dikkat edin. Bunları kolayca tanıyabilmemiz için bazı küçük stiller ekledim:

 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> );

Tanınan her barkod şunları içerir:

• Barkodun ekranımızın neresinde bulunduğunu bize bildiren ve bunun için kaplamayı oluşturmak için kullanacağımız bir bounds özelliği
• Bize o belirli barkodda neyin kodlandığını gösteren bir data özelliği
• Ne tür bir barkod olduğunu söyleyen bir type özelliği (2D, QR, vb.)

Bu üç parametreyi yukarıdaki render işlevinde olduğu gibi kullanmak aşağıdaki sonucu verir:

Platformlar Arası Dağıtım

Belirtildiği gibi, RNCamera kamera modülünün yerel parçalarını evrensel bir çapraz platform diline soyutlar. Bazı özelliklerin yalnızca bir platformda kullanılabileceğini veya başka bir platformda farklı şekilde yazılabileceğini belirtmek önemlidir. Oluşturmayı düşündüğünüz şeyin ihtiyaç duyduğunuz tüm platformlarda desteklendiğinden emin olmak için ilk adım olarak her zaman belgeleri okuduğunuzdan emin olun. Ayrıca, uygulamanızı tamamladıktan sonra uç durumları farklı cihazlarda test etmek her zaman daha iyidir, böylece ürününüzün sağlamlığından emin olursunuz.

İleri Git ve Kodunu Çöz

Umarım bu küçük artırılmış gerçeklik geliştirme tadı yardımcı olmuştur ve artık telefonunuzda veya simülatörünüzde çalışan temel React Native Camera uygulamasına sahipsiniz. Herhangi bir sorunuz veya isteğiniz varsa yorum bırakmaktan çekinmeyin!