[英]Error: Element type is invalid with Check the render method in React Native
I got this Error
trying to use this Component
.我在尝试使用此
Component
时遇到此Error
。
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 Toolbar
.检查
Toolbar
的渲染方法。
Here's the code:这是代码:
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;
I don't know what am doing wrong我不知道做错了什么
Your icon import is wrong, its exported as default component您的图标导入错误,将其导出为默认组件
Change this改变这个
import {Ionicons} from 'react-native-vector-icons/Ionicons';
To至
import Ionicons from 'react-native-vector-icons/Ionicons';
Whenever you see this error, check the imports in a given file, it more likely you mistook default export with named export.每当您看到此错误时,请检查给定文件中的导入,您更有可能将默认导出误认为是命名导出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.