错误：元素类型无效，检查 React Native 中的渲染方法答案

【问题标题】：Error: Element type is invalid with Check the render method in React Native错误：元素类型无效，检查 React Native 中的渲染方法
【发布时间】：2020-12-01 16:15:08
【问题描述】：

我得到了这个Error 试图使用这个Component。

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

检查Toolbar的渲染方法。

代码如下：

import React, {useState} from 'react';
import {View, TouchableWithoutFeedback, TouchableOpacity} from 'react-native';
import {RNCamera} from 'react-native-camera';
import {Ionicons} from 'react-native-vector-icons/Ionicons';
import {Col, Row, Grid} from 'react-native-easy-grid';

import styles from './styles';



const Toolbar = () =>{
    const { FlashMode: CameraFlashModes, Type: CameraTypes } = RNCamera.Constants;
    const [capturing, setCapturing] = useState(false);
    const [cameraType, setCameraType] = useState(RNCamera.Constants.Type.back);
    const [flashMode, setFlashMode] = useState(RNCamera.Constants.Type.off);
    
    const onCaptureIn = ('');
    const onCaptureOut = ('');
    const onLongCapture = ('');
    const onShortCapture = ('');

     return (
        <Grid style={styles.bottomToolbar}>
        <Row>
            <Col style={styles.alignCenter}>
                <TouchableOpacity onPress={() => setFlashMode( 
                    flashMode === CameraFlashModes.on ? CameraFlashModes.off : CameraFlashModes.on 
                )}>
                    <Ionicons
                        name={flashMode == CameraFlashModes.on ? "md-flash" : 'md-flash-off'}
                        color="white"
                        size={30}
                    />
                </TouchableOpacity>
            </Col>
            <Col size={2} style={styles.alignCenter}>
                <TouchableWithoutFeedback
                    onPressIn={onCaptureIn}
                    onPressOut={onCaptureOut}
                    onLongPress={onLongCapture}
                    onPress={onShortCapture}>
                    <View style={[styles.captureBtn, capturing && styles.captureBtnActive]}>
                        {capturing && <View style={styles.captureBtnInternal} />}
                    </View>
                </TouchableWithoutFeedback>
            </Col>
            <Col style={styles.alignCenter}>
                <TouchableOpacity onPress={() => setCameraType(
                    cameraType === CameraTypes.back ? CameraTypes.front : CameraTypes.back
                )}>
                    <Ionicons
                        name="md-reverse-camera"
                        color="white"
                        size={30}
                    />
                </TouchableOpacity>
            </Col>
        </Row>
    </Grid>
    );
};

export default Toolbar;

我不知道自己做错了什么

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您的图标导入错误，已导出为默认组件

改变这个

import {Ionicons} from 'react-native-vector-icons/Ionicons';

到

import Ionicons from 'react-native-vector-icons/Ionicons';

每当您看到此错误时，请检查给定文件中的导入，您更有可能将默认导出误认为是命名导出。

【讨论】：