React-native-camera - TypeError: undefined is not an object

Question

我正在嘗試將相機用於使用“react-native-camera”的矩形原生應用程序。 當我嘗試導航到相機屏幕時，我不斷收到以下錯誤。

這是我的代碼：

import React,{Component} from 'react';
import {SafeAreaView,StyleSheet,TouchableOpacity,TextInput,View,Text,StatusBar,Image} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import UserMainScreen from './UserMainScreen.js';
import Camera from 'react-native-camera';
import {RNCamera} from 'react-native-camera';

class CameraScreen extends Component{
    render(){
        return(
            <View style={cam_styles.container}>
                <Camera ref={cam=>{this.camera = cam;}} style={cam_styles.preview} aspect = {Camera.constants.Aspect.fill}>
                        <Text style={cam_styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
                    </Camera>
            </View>
        );
    }

    takePicture(){
        const options ={};
        this.camera.capture({metadata: options})
        .then(data=>console.log(data))
        .catch(error=>console.log(error));
    }
}

const cam_styles = StyleSheet.create({
    container: {
        flex:1,
        flexDirection: 'row',
    },
    preview:{
        flex:1,
        justifyContent: 'flex-end',
        alignItems:'center'
    },
    capture:{
        flex:0,
        backgroundColor: '#fff',
        borderRadius: 5,
        color:'#000',
        padding:10,
        margin:40
    }
});

const MainNavigator = createStackNavigator({
    Home: UserMainScreen,
    Login : LoginScreen,
    Camera : CameraScreen,
},
    {
        initialRouteName: 'Login',
        headerMode: 'none',
    }
);
const AppContainer = createAppContainer(MainNavigator);

class Login extends Component{

    render (){      
        return (
                <AppContainer />   
        );
    }
}
export default Login;

這是我不斷收到的錯誤。我嘗試刪除 aspect 屬性，但我得到一個Invariant Violation: Element type is invalid: expected a string (for built-in components) or class/function but got undefined. Check the render method of CameraScreen Invariant Violation: Element type is invalid: expected a string (for built-in components) or class/function but got undefined. Check the render method of CameraScreen

使用我當前的代碼，這是我得到的錯誤日志。 我該如何解決這個問題？

TypeError: undefined is not an object (evaluating '_reactNativeCamera.Camera.constants')

This error is located at:
    in CameraScreen (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:900)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at Login.js:97)
    in Login
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

CameraScreen#render
    Login.js:42:100
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
unstable_runWithPriority
    scheduler.development.js:643:23
callFunctionReturnFlushedQueue
    [native code]:0

Answer 1

如果您使用的是 expo 注釋掉您的import { RNCamera } from 'react-native-camera'; 並使用import { Camera } from 'expo'; 如果您不使用 expo 則相反。

渲染 expo 方式：

import { Camera } from 'expo';
class CameraScreen extends Component{
    render(){
        return(
            <View style={cam_styles.container}>
                <Camera ref={cam=>{this.camera = cam;}} style={cam_styles.preview} aspect = {Camera.constants.Aspect.fill}>
                        <Text style={cam_styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
                    </Camera>
            </View>
        );
    }

渲染非expo 方式：

import { RNCamera } from 'react-native-camera';
class CameraScreen extends Component{
    render(){
        return(
            <View style={cam_styles.container}>
                <RNCamera ref={cam=>{this.camera = cam;}} style={cam_styles.preview} aspect = {Camera.constants.Aspect.fill}>
                        <Text style={cam_styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
                    </RNCamera>
            </View>
        );
    }

Answer 2

您應該像import {RNCamera as Camera} from 'react-native-camera'一樣導入模塊，並且應該像Camera.Constants一樣訪問常量

例子：

import { RNCamera as Camera } from "react-native-camera"

const CameraComponent = () => {
  return (
    <View style={{ flex: 1 }}>
      <Camera
        ref={ref => {
          camRef = ref
        }}
        style={{ flex: 1 }}
        aspect={Camera.Constants.Aspect.fill}
        flashMode={Camera.Constants.FlashMode.off}
        type={Camera.Constants.Type.back}>
        <Text
          style={{ position: "absolute", alignSelf: "baseline" }}
          onPress={() => {takePicture(camRef)}}>CAPTURE</Text>
      </Camera>
    </View>
  )
}

Answer 3

同樣的錯誤請你告訴我你是如何解決這個問題的。 您的帖子的答案不合適。 磷