Собственная камера React не работает должным образом с выставкой

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

Я успешно установил react-native-camera, запустив npm install react-native-camera --save, и следующая команда react-native link react-native-camera в консоли выдает следующую ошибку: Собственная камера React не работает должным образом с выставкой Прочитав документ, вы обнаружите, что многие вещи зависят от 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.

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
2 680
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

Если у вас версия Expo 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 (массив)

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

barCodeTypes = {[BarCodeScanner.Constants.BarCodeType.qr]}
  • тип (строка)

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

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

если вы используете expo, у вас будет npx. Вы можете запустить любую команду, основанную на реакции, с помощью npx. Следовательно:

npx реагировать на родную ссылку реагировать на родную камеру

Другие вопросы по теме