Блог

Я получил эту ошибку при попытке импортировать и использовать другой компонент, который я создал в другом файле. И я получил такую ошибку :

 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 `Sidebar`.  

Это мой код для экспорта компонента в качестве компонента по умолчанию в customDrawer.js какой файл находится в том же каталоге:

 const Sidebar = ({ isDarkTheme, setIsDarkTheme, ...props }) =gt; {  const handlePress = () =gt; {  props.navigation.dispatch(DrawerActions.closeDrawer());  props.navigation.navigate("Settings");  };  const { colors } = useTheme();  const toggleTheme = () =gt; {  setIsDarkTheme();  };  // console.log('navi--?',props.navigation);  return (  lt;Container style={{ backgroundColor: colors.background }}gt;  lt;Header  style={{  backgroundColor: colors.background,  borderBottomWidth: 0,  marginTop: 70,  borderWidth: 0,  }}  gt;  lt;StatusBar barStyle="dark-content" backgroundColor="#ffffff" /gt;  lt;Rightgt;  lt;Button transparentgt;  lt;TouchableOpacity onPress={() =gt; handlePress()}gt;  {/* lt;Ionicons name="ios-options" size={28} color={colors.icon} /gt; */}  lt;/TouchableOpacitygt;  lt;/Buttongt;  lt;/Rightgt;  lt;/Headergt;  lt;Contentgt;  lt;DrawerContentScrollView {...props}gt;  lt;DrawerItemList {...props} /gt;  lt;/DrawerContentScrollViewgt;   lt;TouchableOpacitygt;  lt;View  style={{  display: "flex",  flexDirection: "row",  alignItems: "center",  paddingRight: 20,  paddingLeft: 20,  paddingTop: 10,  }}  gt;  lt;Text style={{ flex: 1, color: colors.text }}gt;Dark Themelt;/Textgt;  lt;Viewgt;  lt;Switch onValueChange={toggleTheme} value={isDarkTheme} /gt;  lt;/Viewgt;  lt;/Viewgt;  lt;/TouchableOpacitygt;  lt;/Contentgt;  lt;/Containergt;  ); };  const styles = StyleSheet.create({});  export default Sidebar;  

А потом, в моем App.js У меня есть импортные компоненты, подобные этому :

 import Sidebar from "./customDrawer";  

Все импортные товары, которые я использую в customDrawer.js :

 import {  DrawerContentScrollView,  DrawerItemList, } from "@react-navigation/drawer"; import { Button, Container, Content, Header, Right } from "native-base"; import React, { useState } from "react"; //import { Ionicons } from "@expo/vector-icons"; import { StyleSheet, Text, View, Switch } from "react-native"; import { StatusBar } from "react-native"; import { TouchableOpacity } from "react-native"; import { DrawerActions } from "@react-navigation/native"; import { useTheme } from "@react-navigation/native";