使用从expo-camera导入的CameraView为react-native expo项目设置二维码扫描仪时遇到问题

Question

我一直在尝试为我的 React Native 项目编写 QR 码扫描仪代码（使用打字稿）。我已遵循 expo-camera 的最新文档，尽管我的手机提示允许使用相机并且组件渲染没有错误，但我的手机相机无法打开。

这是我的二维码扫描仪组件代码，遵循文档：

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;

我已经尝试了各种解决方案，包括删除节点模块并重新安装它们，但它不起作用。请帮忙。

Answer 1

问题出在顺风样式代码（项目中心）。删除后，它起作用了。