React-Native Expo-Go应用报错：无效React组件问题求助

错误信息 #

Error: Got an invalid value for 'component' prop for the screen 'ManageExpense'. It must be a valid React Component.

问题代码 #

App.js #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//importing custom components
import ManageExpense from './screens/ManageExpense';
import RecentExpenses from './screens/RecentExpenses';
import AllExpenses from './screens/AllExpenses';

const Stack = createNativeStackNavigator();
const BottomTabs = createBottomTabNavigator();

function ExpensesOverview() {
  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen name="RecentExpenses" component={RecentExpenses} />
      <BottomTabs.Screen name="AllExpenses" component={AllExpenses} />
    </BottomTabs.Navigator>
  );
}

export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="ExpensesOverview" component={ExpensesOverview} />
          <Stack.Screen name="ManageExpense" component={ManageExpense} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

AllExpenses.js #

import React from 'react';
import { Text } from 'react-native';

export default function AllExpenses() {
    return <Text>AllExpenses Screen</Text>
}

ManageExpense.js #

import React from 'react';
import { Text } from 'react-native';

export default function ManageExpense() {
    return <Text>ManageExpense Screen</Text>
}

RecentExpenses.js #

import React from 'react';
import { Text } from 'react-native';

export default function RecentExpenses() {
    return <Text>RecentExpenses Screen</Text>
}

解决方案 #

1. 验证文件路径与文件名 #

确认./screens/ManageExpense.js文件存在，且文件名大小写完全匹配导入语句（React Native在macOS/Linux系统对文件名大小写敏感，避免出现manageexpense.js这类错误命名）。

2. 检查组件导出与语法 #

临时修改App.js，将ManageExpense组件直接定义在文件内，替换原import语句：

// 替换原import ManageExpense的语句
const ManageExpense = () => <Text>ManageExpense Screen</Text>;

如果修改后能正常运行，说明原ManageExpense.js文件存在导出异常或语法错误，仔细检查文件是否有遗漏的括号、分号等问题。

3. 清除Expo缓存 #

停止当前Expo服务器，执行以下命令清除缓存后重启：

npx expo start --clear

同时关闭Expo Go客户端，重新扫码加载项目。

4. 重新安装兼容的导航依赖 #

确保导航库版本与当前Expo版本兼容，执行以下命令重新安装依赖：

npx expo install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

内容的提问来源于stack exchange，提问作者Chunderpeen