Zbuduj skaner QR: samouczek dotyczący React Native Camera

W tym samouczku React Native Camera stworzymy aplikację do odczytu kodów QR. Będzie mógł odczytywać kody QR w czasie rzeczywistym i wyświetlać ich zawartość na ekranie w momencie wykrycia. Będziemy używać szybkiego startu CLI React Native.

(Uwaga: Jeśli potrzebujesz pomocy w konfiguracji, zawsze możesz zapoznać się ze stroną React Native Pierwsze kroki — nie zapomnij kliknąć przycisku „React Native CLI Quickstart”, ponieważ „Expo CLI Quickstart” jest wstępnie wybrany w tym czasie pisania tego artykułu.)

Dlaczego React Native?

React Native to cenna platforma, która zapożycza paradygmat i zasady projektowania Reacta, aby umożliwić błyskawiczne, wieloplatformowe tworzenie zgrabnych interfejsów użytkownika. Facebook, Airbnb, Uber i wiele innych ma już swoje najnowsze aplikacje zbudowane w React Native.

Co to jest kamera natywna React?

React Native Camera (RNCamera) to główny komponent, jeśli chodzi o implementację funkcji kamery w aplikacji React Native. Ten składnik pomaga komunikować się z natywnym systemem operacyjnym za pomocą kilku prostych funkcji, dzięki czemu można korzystać ze sprzętu urządzenia. Możesz budować swoje aplikacje wokół tych funkcji bez kłopotania się kodem natywnym. RNCamera obsługuje już:

• Zdjęcia
• Filmy
• Wykrywanie twarzy
• Skanowanie kodów kreskowych
• Rozpoznawanie tekstu (tylko Android)

Zauważ, że RNCamera występowała w dwóch wersjach:

1. RWKamera
2. RTCCamera (przestarzałe)

…więc upewnij się, że używasz RNCamera, aby otrzymywać najnowsze aktualizacje.

Uwaga: React Native Camera jest w dużej mierze oparty na module kamery Expo, a poruszanie się tam iz powrotem między nimi jest dość łatwe.

Tworzenie pierwszej aplikacji za pomocą RNCamera

Zanim zaczniemy korzystać z naszego skanera React Native QR, musimy zainstalować kilka zależności.

Instalowanie zależności RNCamera

Nasza konfiguracja wymaga co najmniej JDK w wersji 1.7 (którą najprawdopodobniej masz), a jeśli korzystasz z Androida, będziesz potrzebować buildToolsVersion nowszej niż 25.0.2. (Aby mieć pewność, w dokumentacji znajduje się bardziej szczegółowa i aktualna lista).

Zacznijmy od stworzenia nowego projektu React Native:

 react-native init CameraExample

Teraz wdrożmy pierwszą wersję naszego przykładu React Native Camera na naszym telefonie.

 cd CameraExample react-native run-android

Powinno to wyglądać jak na poniższym zrzucie ekranu:

Teraz nadszedł czas na zainstalowanie pakietu react-native-camera w naszym projekcie. Skorzystamy z opcji „W większości automatyczna instalacja z reakcją natywną”. (Istnieją inne, takie jak głównie instalacja automatyczna z CocoaPods i instalacja ręczna, ale będziemy trzymać się pierwszej opcji, ponieważ jest najbardziej wydajna.) Po prostu uruchom:

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

Musisz również dodać następujące uprawnienia do 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"

Musisz także ustawić strategię wymiarowania w android/app/build.gradle — nie ma wartości domyślnej, a jeśli jej nie zdefiniujesz, pojawi się błąd:

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

Uwaga: strategia wymiarowania powinna normalnie być ustawiona jako general , jak powyżej. Możesz jednak ustawić go na mlkit , jeśli chcesz używać MLKit do rozpoznawania tekstu/twarzy/kodów kreskowych.

Po instalacji będziesz musiał użyć run-android , aby zainstalować nowe zależności:

 react-native run-android

Jeśli wszystko poszło dobrze, powinieneś ponownie zobaczyć ten sam ekran powitalny React Native na swoim urządzeniu lub symulatorze.

Konfigurowanie aparatu

Najpierw zacznijmy od zmodyfikowania App.js i zaimportowania tam RNCamera :

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

Następnie zmodyfikujemy funkcję render , aby uwzględnić naszą nowo zaimportowaną RNCamera . Zwróć uwagę na atrybut style dodany do aparatu, aby zajmował cały ekran. Bez tych stylów renderowanie kamery może być niemożliwe na ekranie, ponieważ nie zajmuje ona miejsca:

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

Po dodaniu tego kodu twój interfejs powinien mieć włączony aparat na pełnym ekranie, tak jak na poniższym zrzucie ekranu:

Teraz widzimy kody kreskowe (tak jak widzimy nasze testowe kody QR wyświetlane na powyższym monitorze), ale nie możemy ich jeszcze odczytać. Użyjmy algorytmu RNCamera, aby rozpoznać, co jest napisane w każdym z nich.

Odczytywanie informacji o kodzie kreskowym

W celu odczytania informacji o kodzie kreskowym użyjemy właściwości onGoogleVisionBarcodesDetected , aby wywołać funkcję i wyodrębnić informacje. Dodajmy to w komponencie <RNCamera> i połączmy go z funkcją barcodeRecognized , aby się tym zająć. Zwróć uwagę, że onGoogleVisionBarcodesDetected zwraca obiekt zawierający właściwość barcodes , która zawiera tablicę wszystkich kodów kreskowych rozpoznanych przez aparat.

Uwaga: technologia kodów QR onGoogleVisionBarcodesDetected jest dostępna tylko w systemie Android, ale jeśli wolisz podejście wieloplatformowe, lepiej wybierz onBarCodeRead . Obsługuje tylko jeden kod kreskowy na raz — używanie go jako rozwiązania zastępczego jest ćwiczeniem dla czytelnika.

Oto jak powinna wyglądać nasza <RNCamera> po dodaniu onGoogleVisionBarcodesDetected :

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

A teraz możemy obsłużyć kody kreskowe w App.js za pomocą poniższej funkcji, która tylko ostrzeże nas w przypadku wykrycia kodu kreskowego i powinna wyświetlić jego zawartość na ekranie:

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

Oto jak to wygląda w akcji:

Renderowanie nakładek z kodem kreskowym

Poprzedni zrzut ekranu pokazuje teraz informacje zawarte w kodzie kreskowym, ale nie pozwala nam wiedzieć, która wiadomość należy do którego kodu kreskowego. W tym celu zagłębimy się w barcodes zwrócone z onGoogleVisionBarcodesDetected i spróbujemy wskazać każdy z kodów kreskowych na naszym ekranie.

Ale najpierw będziemy musieli zapisać rozpoznane kody kreskowe do stanu, abyśmy mogli uzyskać do nich dostęp i renderować nakładkę na podstawie zawartych danych. Zmodyfikujemy teraz naszą wcześniej zdefiniowaną funkcję, aby wyglądała tak:

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

Będziemy teraz musieli dodać obiekt state zainicjowany do pustej tablicy kodów kreskowych, aby nie powodował żadnych błędów w naszych funkcjach render :

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

Stwórzmy teraz funkcję renderBarCodes , którą należy dodać wewnątrz komponentu <RNCamera> :

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

Ta funkcja powinna teraz pobierać rozpoznane kody kreskowe ze stanu i wyświetlać je na ekranie:

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

Zauważ, że mapowanie jest wskazywane na renderBarcode , który powinien renderować każdy kod kreskowy na ekranie. Dodałem kilka drobnych stylizacji, abyśmy mogli je łatwo rozpoznać:

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

Każdy rozpoznany kod kreskowy ma:

• Właściwość bounds informująca nas, gdzie na ekranie znaleziono kod kreskowy, której użyjemy do renderowania dla niego nakładki
• Właściwość data , która pokazuje nam, co jest zakodowane w tym konkretnym kodzie kreskowym
• Właściwość type , która mówi nam, jaki to jest kod kreskowy (2D, QR itp.)

Użycie tych trzech parametrów, jakie mamy w funkcji render powyżej, daje następujący wynik:

Wdrożenie na wielu platformach

Jak wspomniano, RNCamera abstrahuje natywne części modułu kamery do uniwersalnego, wieloplatformowego języka. Należy pamiętać, że niektóre funkcje byłyby dostępne tylko na jednej platformie lub mogą mieć inny sposób napisania na innej. Aby upewnić się, że to, co zamierzasz zbudować, jest obsługiwane na wszystkich wymaganych platformach, najpierw zawsze przeczytaj dokumentację. Co więcej, zawsze lepiej jest przetestować obudowy brzegowe na różnych urządzeniach po zakończeniu implementacji, aby mieć pewność co do solidności swojego produktu.

Idź dalej i dekoduj

Mam nadzieję, że ten mały posmak rozwoju rzeczywistości rozszerzonej okazał się pomocny i że masz teraz podstawową aplikację React Native Camera działającą na telefonie lub symulatorze. Jeśli masz jakieś pytania lub prośby, możesz zostawić komentarz!