Проблемы с использованием CameraView, импортированного из выставочной камеры, для настройки сканера QR-кода для выставочного проекта, ориентированного на реагирование

Я пытался написать код для сканера QR-кода для моего проекта React Native (используя машинописный текст). Я следовал последней документации по экспо-камере, и хотя мой телефон запрашивает разрешение на использование камеры и компонент отображается без ошибок, камера моего телефона не включается.

Вот мой код компонента сканера QR-кода, следующий за документом:

import React, { useState, useEffect, useRef } from "react";
import { CameraView, useCameraPermissions } from "expo-camera";
import { View, Text, TouchableOpacity, Button } from "react-native";
import tw from "twrnc";

interface CameraFacing {
  facing: "front" | "back";
}

const QrCodeScanner: React.FC = () => {
  const [facing, setFacing] = useState<CameraFacing["facing"]>("back");
  const [permission, requestPermission] = useCameraPermissions();

  useEffect(() => {
    if (!permission) return; // Skip if permission is still loading

    if (permission.status !== "granted") {
      // Request permission if not granted or undetermined
      requestPermission();
    }
  }, [permission, requestPermission]);
  if (!permission?.granted) {
    // Camera permissions are not granted yet.
    return (
      <View style = {tw`flex-1 items-center justify-center`}>
        <Text style = {tw`text-center`}>
          We need your permission to show the camera
        </Text>
        <Button title = "grant permission" onPress = {requestPermission} />
      </View>
    );
  }

  const toggleCameraFacing = () => {
    setFacing((current) => (current === "back" ? "front" : "back"));
  };

  return (
     <View style = {tw`flex-1`}>
      <CameraView style = {tw`flex-1`} facing = {facing}>
        <View style = {tw`absolute bottom-0 right-0 pb-4 pr-4`}>
          <TouchableOpacity
            style = {tw`rounded-full bg-gray-500 p-2`}
            onPress = {toggleCameraFacing}
          >
            <Text style = {tw`text-white text-lg`}>Flip Camera</Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
};

export default QrCodeScanner;

Я пробовал всевозможные решения для этой проблемы, включая удаление модулей узлов и их повторную установку, но это не работает. Пожалуйста помоги.

Умерло ли 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 без написания...
1
0
111
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Проблема была в коде стиля попутного ветра (центр элементов). Когда удалили, все заработало.

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