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>

Ну вот.