最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

android - React Native Expo-Camera: 'type is invalid' error when using Camera component - Stack Overflow

programmeradmin3浏览0评论

I'm working on a React Native project using Expo SDK 50 and expo-camera, but I'm encountering the following error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

The error occurs when rendering the component in my QRScanner.js file. Here’s my implementation:

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { Camera } from 'expo-camera';

const QRScanner = () => {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

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

  if (hasPermission === null) {
    return <View style={styles.centered}><Text>Requesting for camera permission...</Text></View>;
  }

  if (hasPermission === false) {
    return <View style={styles.centered}><Text>No access to camera</Text></View>;
  }

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

const styles = StyleSheet.create({
  container: { flex: 1 },
  centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  buttonContainer: { flex: 1, justifyContent: 'flex-end', marginBottom: 50 }
});

export default QRScanner;

my app.json config:

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "plugins": [
      "expo-router",
      [
        "expo-camera",
        {
          "cameraPermission": "Allow MyApp to access your camera",
          "microphonePermission": "Allow MyApp to access your microphone",
          "recordAudioAndroid": true
        }
      ]
    ]
  }
}
发布评论

评论列表(0)

  1. 暂无评论