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

Question

我在尝试使用此Component时遇到此Error 。

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

检查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;

我不知道做错了什么

Answer 1

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

改变这个

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

至

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

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