React Native Camera — это обязательный компонент при создании приложений React Native, которым требуется функциональность использования камеры устройства. Поддерживаемый Сообществом React Native, этот модуль поддерживает:
- Видео
- Фотографии
- Распознавание лиц
- Распознавание текста
- Сканирование штрих-кода
Это также помогает вашему приложению React Native взаимодействовать с собственной операционной системой, используя аппаратное обеспечение устройства, реализуя некоторые вспомогательные методы.
В этом руководстве давайте создадим простое приложение для сканирования QR-кода в React Native, реализуя одну из функций, поддерживаемых этим модулем, называемую сканированием штрих-кода.
Для получения дополнительной информации о RNCamera, пожалуйста, обратитесь к его официальной документации здесь. Полный код этого руководства доступен в этом репозитории GitHub.
Установка зависимостей
Для начала давайте создадим проект React Native, используя приведенную ниже команду из окна терминала:
npx react-native init qrCodeScannerApp # navigate inside the directory once it is generated cd qrCodeScannerApp
Далее вам нужно установить некоторые зависимости для использования модуля RNCamera. Если вы используете последнюю версию React Native,
yarn add react-native-camera
Для устройств iOS вам необходимо установить модули, как показано ниже:
# after dependency installation
cd ios/
pod install
cd ..
Настройка разрешений камеры
Чтобы получить доступ к аппаратной камере устройства, необходимо добавить набор разрешений. Для iOS откройте файл ios/qrCodeScannerApp/Info.plist
и добавьте следующие разрешения:
<!-- Required with iOS 10 and higher -->
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<!-- Required with iOS 11 and higher: include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>
Далее, чтобы добавить разрешения, чтобы приложение корректно работало на Android-устройстве, откройте файл android/app/src/main/AndroidManifest.xml
и добавьте следующее:
<!-- Required --> <uses-permission android:name="android.permission.CAMERA" /> <!-- Include this only if you are planning to use the camera roll --> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Затем откройте другой файл android/app/build.gradle
и добавьте следующее:
android { ... defaultConfig { ... // insert this line missingDimensionStrategy 'react-native-camera', 'general' } }
Вот и все, что касается процесса установки для платформ ОС. В следующем разделе давайте продолжим создание приложения.
Настройка камеры в приложении React Native
В этом разделе давайте сначала попробуем протестировать модуль RNCamera. Откройте файл App.js
и начните с добавления следующих операторов импорта. Здесь нет ничего необычного. Вам просто нужно импортировать основные компоненты React Native, такие как View
и Alert
, а также RNCamera
из react-native-camera
.
import React, { Component } from 'react' import { StyleSheet, View, Alert } from 'react-native' import { RNCamera } from 'react-native-camera' class App extends Component { render() { return ( <View style={styles.container}> <RNCamera style={{ flex: 1, alignItems: 'center' }} ref={ref => { this.camera = ref }} /> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', backgroundColor: 'black' } }) export default App
После добавления приведенного выше фрагмента убедитесь, что вы создаете приложение для ОС, которую используете для его тестирования. Я собираюсь использовать настоящее Android-устройство для тестирования.
# for iOS react-native run-ios # for Android react-native run-android
При тестировании на устройстве Android убедитесь, что устройство подключено через USB, а также убедитесь, что отладка по USB включена, прежде чем запускать предыдущую команду сборки из окна терминала.
После того, как приложение завершит сборку и этот процесс запустит сборщик метро, вы получите запрос на разрешение при первом запуске приложения.
Это означает, что камера работает должным образом, и теперь вы можете использовать ее для сканирования QR-кодов.
Чтение информации QR-кода
Чтобы прочитать информацию QR-кода, вам нужно будет использовать реквизит onGoogleVisionBarcodesDetected
. Эту опору с помощью вспомогательного метода можно использовать для оценки значения отсканированного QR-кода.
В файле App.js
начните с изменения компонента RNCamera
, как показано ниже.
<RNCamera ref={ref => { this.camera = ref }} style={styles.scanner} onGoogleVisionBarcodesDetected={this.barcodeRecognized} />
Добавьте соответствующие стили для компонента «Камера» в ранее определенный объект StyleSheet
.
const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', backgroundColor: 'black' }, // add the following scanner: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' } })
Затем перед методом рендеринга добавьте вспомогательный метод barcodeRecognized
, а также переменную состояния barcodes
, начальным значением которой будет массив.
state = { barcodes: [] } barcodeRecognized = ({ barcodes }) => { barcodes.forEach(barcode => console.log(barcode.data)) this.setState({ barcodes }) }
Приведенный выше вспомогательный метод будет обновлять переменную состояния barcodes
, которую можно использовать для отображения значения QR-кода, отсканированного с помощью RNCamera. Давайте добавим два вспомогательных метода после метода barcodeRecognized
. Эти вспомогательные методы будут отвечать за отображение информации QR-кода.
renderBarcodes = () => ( <View>{this.state.barcodes.map(this.renderBarcode)}</View> ) renderBarcode = ({ data }) => Alert.alert( 'Scanned Data', data, [ { text: 'Okay', onPress: () => console.log('Okay Pressed'), style: 'cancel' } ], { cancelable: false } )
Наконец, чтобы отобразить окно предупреждения, убедитесь, что вы добавили приведенный ниже код, чтобы изменить компонент RNCamera
, как показано ниже.
<RNCamera ref={ref => { this.camera = ref }} style={styles.scanner} onGoogleVisionBarcodesDetected={this.barcodeRecognized}> {this.renderBarcodes} </RNCamera>
Ну вот.