React-native-camera - TypeError：未定义不是对象

Posted 2023-03-11

【中文标题】React-native-camera - TypeError：未定义不是对象

【英文标题】：React-native-camera - TypeError: undefined is not an object

【发布时间】：2019-11-06 03:04:42

【问题描述】：

我正在尝试将相机用于使用“react-native-camera”的 rect 本机应用程序。 当我尝试导航到相机屏幕时，我不断收到以下错误。

这是我的代码：

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

使用我当前的代码，这是我得到的错误日志。我该如何解决？

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

【参考方案1】：

如果您使用 expo 注释掉您的 import RNCamera from 'react-native-camera'; 并使用 import Camera from '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>
        );
    

呈现非展览方式：

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>
        );