Реактивная камера не работает должным образом с экспо - PullRequest
Новая
       58

Реактивная камера не работает должным образом с экспо

0 голосов
/ 10 июля 2019

Я хочу создать программу чтения QR-кода с реагировать на нативную, и я использую expo. Я следую руководству на основе официальной документации здесь: act-native-qrcode-scanner

Я успешно установил react-native-camera, запустив npm install react-native-camera --save, и в консоли есть комманд react-native link react-native-camera, которая выдает мне следующую ошибку: Error message Читая документ, вы обнаружите, что многое зависит от react-native link, например react-native link react-native-qrcode-scanner react-native link react-native-permissions, а также после этого есть некоторые конфигурации, такие как <uses-permission android:name="android.permission.VIBRATE"/>, которые я не могу сделать, потому что я не использую react-native-cli.

1 Ответ

1 голос
/ 11 июля 2019

Экспо уже есть то, что вы хотите.expo-barcode-scanner

Если ваша версия Экспо 33, вы должны загрузить ее отдельно.

Вы можете запустить expo install expo-barcode-scanner

Вы должны запросить permission для доступа к камере пользователя, прежде чем пытаться получить ее.Для этого вам нужно будет использовать Permissions API.Это можно увидеть на практике в следующем примере.

Базовый пример 

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

import { BarCodeScanner } from 'expo-barcode-scanner';

export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
    scanned: false,
  };

  async componentDidMount() {
    this.getPermissionsAsync();
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  };

  render() {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'flex-end',
        }}>
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={StyleSheet.absoluteFillObject}
        />

        {scanned && (
          <Button title={'Tap to Scan Again'} onPress={() => this.setState({ scanned: false })} />
        )}
      </View>
    );
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ scanned: true });
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };
}

реквизит

  • onBarCodeScanned (функция)

Обратный вызов, который вызывается после успешного сканирования штрих-кода.Обратный вызов предоставляется с объектом формы { type: BarCodeScanner.Constants.BarCodeType, data: string }, где тип относится к типу штрих-кода, который был отсканирован, а данные - это информация, закодированная в штрих-коде (в этом случае QR-кодов, это часто URL-адрес).Информацию о поддерживаемых значениях см. В BarCodeScanner.Constants.BarCodeType.

  • barCodeTypes (Array)

Массив типов штрих-кодов.Использование: BarCodeScanner.Constants.BarCodeType.<codeType>, где codeType является одним из перечисленных выше.По умолчанию: все поддерживаемые типы штрих-кодов.Например: 

barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}

  • тип (строка)

    - Обращение к камере.Используйте один из BarCodeScanner.Constants.Type.Используйте Type.front или Type.back.То же, что и Camera.Constants.Type.По умолчанию: Type.back.

Примечание: Передача undefined в onBarCodeScanned пропеллер не приведет к сканированию.Это можно использовать для эффективной «приостановки» сканера, чтобы он не сканировал постоянно даже после получения данных.

...