如何在 react native 中解决这个问题：组件异常答案

【问题标题】：How to solve this problem in react native :component exception如何在 react native 中解决这个问题：组件异常
【发布时间】：2021-01-08 08:12:55
【问题描述】：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

查看Application的渲染方法。

enter code here
import React, { Component } from 'react'; 
import { View, StatusBar, TouchableOpacity, Image } from 'react-native'; 
import Camera from 'react-native-camera'; 
import styles from './styles'; 
import PhotoCaptureIcon from '../assets/ic_photo_camera_36pt.png'; 


export default class Application extends Component { 
   constructor(props){
       super();
       this.camera=null;
   }

   takePicture= () =>{
       if(this.camera){
           this.camera.capture()
           .then((Data)=> console.log(data))
           .catch(err=> console.error(err));
       }
   }

   render(){
       return (
           <View style={styles.container}>
                <StatusBar animated hidden /> 
                <Camera 
                    ref={(cam) => { 
                        this.camera = cam; 
                    }} 
                    style={styles.preview} 
                /> 
            <View style={[styles.overlay, styles.bottomOverlay]}> 
                <TouchableOpacity style={styles.captureButton} onPress= {this.takePicture}>  

                    <Image source={PhotoCaptureIcon} /> 
                </TouchableOpacity> 
            </View> 
        </View>

       );
   }

}

【问题讨论】：

标签： javascript android ios react-native

【解决方案1】：

您基本上是在引用 react-native-camera 的默认导出。这不起作用，因为它没有引用现在导出为 RNCamera 的 Camera 组件。你可以阅读更多关于这个here的信息。

你需要替换这个

import Camera from 'react-native-camera';

有了这个

import { RNCamera as Camera } from 'react-native-camera'.

这将正确呈现相机组件，并且应该修复错误。祝你好运

【讨论】：

好。如果这有帮助，请接受答案或投票。谢谢