Как подружить Expo и BarCodeScanner из его же документации?

Для того чтобы использовать BarCodeScanner в своем React Native проекте на Expo, необходимо выполнить следующие шаги:

Шаг 1: Установка зависимостей
Перед началом работы нам понадобится установить несколько пакетов. Для этого откройте терминал и перейдите в корневую директорию вашего проекта. Выполните следующую команду:

npm install expo-barcode-scanner expo-permissions

Эта команда установит пакеты expo-barcode-scanner и expo-permissions, которые нам понадобятся для работы с BarCodeScanner.

Шаг 2: Подключение компонента BarCodeScanner
Теперь, когда все пакеты установлены, мы можем добавить компонент BarCodeScanner в наше приложение.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import * as Permissions from 'expo-permissions';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  
  useEffect(() => {
    (async () => {
      const { status } = await Permissions.askAsync(Permissions.CAMERA);
      setHasPermission(status === 'granted');
    })();
  }, []);

  const handleBarCodeScanned = ({ data }) => {
    setScanned(true);
    alert(`Bar code with data ${data} has been scanned!`);
  };

  if (hasPermission === null) {
    return <Text>Requesting camera permission...</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Здесь мы создаем функциональный компонент App, который содержит состояние hasPermission (null, если разрешение еще не запрошено), состояние scanned (false, если штрих-код еще не отсканирован), и две функции - useEffect и handleBarCodeScanned.

В useEffect мы проверяем и запрашиваем разрешение на использование камеры при инициализации компонента.

В handleBarCodeScanned мы устанавливаем состояние scanned в true и выводим алерт с данными отсканированного штрих-кода.

Затем мы проверяем разрешение и выводим соответствующие сообщения, если доступа к камере нет или разрешение еще не было запрошено.

Возвращаемый компонент содержит компонент BarCodeScanner событием onBarCodeScanned, которое вызывается при каждом сканировании штрих-кода. Также добавлен элемент Button, который позволяет повторно сканировать штрих-код, если состояние scanned равно true. Разметка flexbox используется для выравнивания компонентов по центру экрана. Компонент BarCodeScanner имеет стиль StyleSheet.absoluteFillObject, который делает его занимающим всю доступную площадь экрана.

Шаг 3: Запуск проекта
Чтобы запустить проект, выполните следующую команду в терминале:

npm start

Это запустит Expo DevTools и сканер QR-кодов. Ваше приложение должно отобразиться в Expo Client на вашем устройстве или в эмуляторе.

Теперь вы можете использовать BarCodeScanner в своем React Native приложении на Expo.