React Native导航与FlatList项目中Element type is invalid错误的解决求助

问题描述 #

我正在做一个使用Navigation和FlatList的React Native项目，但运行时遇到了这个错误：

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.

我知道这个错误通常是组件导出不正确或者默认导入/命名导入搞混导致的，但我已经仔细检查了代码，确认所有组件都是用export default导出的。下面是我的项目结构和代码：

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/Screens/HomeScreen/HomeScreen';
import CoursesScreen from './src/Screens/Courses/CoursesScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="CoursesScreen" component={CoursesScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';

export default function HomeScreen() {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  );
}

const styles = StyleSheet.create({});

CourseScreen.js

import { StyleSheet, Text, FlatList } from 'react-native';
import React from 'react';

export default function CoursesScreen() {
  const Person = [
    { id: 1, name: 'Horace', age: 10 },
    { id: 2, name: 'Amos', age: 20 },
    { id: 3, name: 'Peter', age: 30 },
    { id: 4, name: 'John', age: 40 },
  ];

  return (
    <FlatList
      data={Person}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <Text style={styles.content}>
          {item.id}.{item.name}
        </Text>
      )}
    />
  );
}

const styles = StyleSheet.create({
  content: {
    fontSize: 20,
    backgroundColor: 'yellow',
    padding: 20,
    marginVertical: 10,
  },
});

我已经尝试过的方法 #

• 确认所有组件都是用export default导出的
• 检查导入的文件路径是否正确
• 重置Metro缓存并重启项目：

npx react-native start --reset-cache

• 重新安装了所有导航相关依赖：

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons
npm install @react-navigation/native-stack

但问题还是没解决！有没有什么我漏掉的地方？希望能得到大家的帮助，谢谢！😊

我的解答 #

嘿，我发现了一个非常容易忽略的细节——你的文件名和导入路径不匹配！

你在App.js里导入的是CoursesScreen，路径指向./src/Screens/Courses/CoursesScreen，但你给出的组件文件名是CourseScreen.js（少了一个末尾的s）。这就导致React Native找不到对应的组件文件，最终抛出了Element type is invalid的错误。

解决方法很简单，二选一就行：

1. 把CourseScreen.js重命名为CoursesScreen.js，保持和导入的文件名完全一致；
2. 修改App.js里的导入语句，改成import CoursesScreen from './src/Screens/Courses/CourseScreen';（注意最后一个文件名的拼写）。

如果修改后还是有问题，可以再试试这两个操作：

• 检查react-native-reanimated的babel配置是否正确，需要在babel.config.js里添加plugins: ['react-native-reanimated/plugin']；
• 完全关闭Metro服务和模拟器/真机，然后重新启动项目，避免缓存残留。

试试看，应该能解决你的问题！

备注：内容来源于stack exchange，提问作者zafer