React Native 错误：元素类型无效：需要字符串或类/函数，但得到：未定义。但在哪里呢？

Question

我是第一个在代码中添加覆盖时出现此错误的人

const HomeScreen = ({ navigation }) => {
  const [modal, setModal] = useState(true);
  return (
    
    <View>
        <Button
          buttonStyle="moreBtn"
          title="aaa"
          onPress={() =>
            navigation.navigate('Profile', { name: 'Jane' })
          }
        />
         <Overlay>
          <Text>Hello from verlay!</Text>
        </Overlay> 
        <Modal
          animationType="slide"
          transparent={true}
          visible={modal}
          style={styles.modal}
          onPress={() => {
            setModal(false)
          }}
        >
          <View style={{height:500}}>
          <Text>aaaaa</Text>
          <Button onPress={() => {
            setModal(false)
          }}>Bouton</Button>
          </View>
        </Modal>
    </View>
  );
};

当我将覆盖组件 JSX 放入渲染函数中时，出现此错误：

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.

为什么？

我编辑了我的帖子，在文件顶部添加了以下导入内容。

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { TouchableOpacity, StyleSheet, Text, View, Button, FlatList, ScrollView, Modal } from 'react-native';
import Overlay from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

“HomeScreen”位于“App”BottomTabNavigator 元素内

export default App;

Answer 1

您错误地导入了 Overlay React-native 没有 Overlay 组件，您可以使用

react-native-elements

中的 Overlay

改变

import Overlay from 'react-native';

到

import { Overlay } from 'react-native-elements';

检查这个：https://react-native-elements.github.io/react-native-elements/docs/overlay.html

Answer 2

尽管 @Goskula Jayachandra 已经在这里回答了这个问题，但我仍将其作为答案，提供给未来的查找者，并提供更多信息。

首先，这个错误，至少据我所知，总是意味着您错误地导入了某些内容。如果您导入自己的组件/函数，您可能错误地导出了它。

对于这个具体示例，您搞砸了两次导入。

首先：Overlay不是react-native的一部分，所以失败了。

第二：Overlay 并不是它来自的包的默认导出。

导入采用以下形式：`import DefaultExport, { NamedExport1, NamedExport2 ...} from 'package-name/file-path';

在查看此类错误时，首先检查您的导出（如果是您自己的导入文件），然后检查您的导入以确保它符合上述格式，您经常交换命名导出和默认导出。有时，实际错误出现在您导入的文件中，而 IT 的导入已损坏 - 追踪和修复这些可能会很有趣。

犯的简单错误，一旦你学会了这一点，就很容易纠正。

因此，鉴于上述信息，您的导入应如下所示：

import { Overlay } from 'react-native-elements';