错误：元素类型无效，检查相机的渲染方法

Question

I've seen similar questions relating to this problem but I haven't been able to solve mine using them. I get this error whenever I try to access a component in my App.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Camera .

This is my Camera code.

import React, { Component } from 'react';
import  {View}  from 'react-native';
import {CameraKitCameraScreen} from "react-native-camera-kit";
import Axios from "axios";
import {icons} from "../../../App";
import Geolocation from "react-native-geolocation-service"

 class Camera extends Component {
    WeatherAPIKey = "";

    event;

    lat;
    lon;
    location;

    create_form_data = (photo_form_name, photo, body) => {
        const data = new FormData();
    
        data.append(photo_form_name, {
            name: photo.name,
            type: "image/jpeg",
            uri: `file://${photo.uri}`
        });
    
        Object.keys(body).forEach((key) => {
            data.append(key, body[key]);
        });
    
        return data;
    }

    cancel(){
        let type = this.props.navigation.getParam("type", "");
        let update = this.props.navigation.getParam("update", {});
        let job = this.props.navigation.getParam("job", {});
        let cancel_func = this.props.navigation.getParam("cancel_func", () => {});
        

        // alert(JSON.stringify(update));
        //this.props.navigation.pop();
        if(type === "before_img"){
            this.props.navigation.pop();
            alert("sorry this job cannot be started before you take a picture");
        }else if(type === "complete"){
            this.props.navigation.pop();
            alert("This job cannot be completed nor reviewed wothout a photo");
        }else{
            this.props.navigation.pop();
        }
    }
    

    async save_photo(){
        
        let type = this.props.navigation.getParam("type", "");
        let update = this.props.navigation.getParam("update", {});
        let job = this.props.navigation.getParam("job", {});
        let shot_func = this.props.navigation.getParam("shot_func", () => {});

        if(type === "after_img"){
            if(update){
                const data = this.create_form_data("after_image", this.event.image, {});
                // alert(JSON.stringify(data));
                this.props.upload_after(data, update.job, /*temp*/{uri: `file://${this.event.image.uri}`, name: this.event.image.name} );
                //this.setState({after_img: res.uri});
            }
        }else if(type === "before_img"){
            if((await this.props.create_update({update_type: "job start", job_id: job._id, text_content: `You started job "${job.title}"`}))){
                const data = this.create_form_data("before_image", this.event.image, {});

                this.props.upload_before(data, job._id, /*temp*/{uri: `file://${this.event.image.uri}`, name: this.event.image.name} );
                
                this.props.allow_job_start();
                this.props.start_job(job._id, job.started);
                shot_func();
            }
            //this.props.navigation.pop();
            // alert("This will be saved as the before image");
        }else if(type === "complete"){
            const data = this.create_form_data("after_image", this.event.image, {});
            this.props.create_update({update_type: "job completion", job_id: job._id, text_content: `You completed job "${job.title}. Here are the Before and after pictures."`});

            await this.props.upload_after(data, job._id, /*temp*/{uri: `file://${this.event.image.uri}`, name: this.event.image.name} );

            let file = job.image_urls.after[0].url;
            shot_func(file);
        }else if(type === "profile_img"){
            const data = this.create_form_data(type, this.event.image, {});

            await this.props.upload_profile_image(data)
        }
    };

    async shoot_photo(event){
        this.event = event;
        // alert(JSON.stringify(event))
        if(event.type === "left"){
                this.cancel();
        }else if(event.type === "capture"){
            this.props.navigation.pop();
            //console.log(event);
            this.save_photo();
            
        }
    }

    state = {  }
    render() { 
        return (
            <View style={{flex:1}}>

                    <CameraKitCameraScreen 
                        actions={{rightButtonText: "Finish", leftButtonText: "Cancel"}}
                        onBottomButtonPressed={this.shoot_photo.bind(this)}
                        flashImages={{
                            on: icons["camera_flash_on_icon"],
                            off: icons["camera_flash_off_icon"],
                            auto: icons["camera_flash_auto_icon"]
                        }}
                        cameraFlipImage={icons["camera_flip_icon"]}
                        captureButtonImage={icons["camera_shoot_icon"]}
                    />

            </View>
        );
    }
}

export {Camera}

Answer 1

Changing CameraKitCameraScreen to CameraScreen fixed it for me

render() { 
        return (
            <View style={{flex:1}}>
                    <CameraScreen 
                        actions={{rightButtonText: "Finish", leftButtonText: "Cancel"}}
                        onBottomButtonPressed={this.shoot_photo.bind(this)}
                        flashImages={{
                            on: icons["camera_flash_on_icon"],
                            off: icons["camera_flash_off_icon"],
                            auto: icons["camera_flash_auto_icon"]
                        }}
                        cameraFlipImage={icons["camera_flip_icon"]}
                        captureButtonImage={icons["camera_shoot_icon"]}
                    />
            </View>
        );
    }