React Native Tab导航报错：Home屏component属性值无效

我在开发React Native应用时，编写了MainContainer.js作为底部按钮导航栏，但使用Tab.Screen定义标签页屏幕时，始终出现如下报错：

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

已验证依赖环境无问题（仅保留简单alert语句可正常运行），错误仅出现在代码逻辑中。也曾尝试用大括号引入组件，但仍触发其他错误，附上相关代码恳请协助排查：

MainContainer.js代码 #

import * as React from 'react';
import {View, Text} from 'react-native';
import { NavigationContainer, TabActions} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons'
//Screens
import HistoryScreen from './screens/HistoryScreen'
import HomeScreen from './screens/HomeScreen'
import LocationScreen from './screens/LocationScreen'
//ScreenNames
const HistoryName='History';
const HomeScreenName='Home';  
const LocationName='Location';

const Tab= createBottomTabNavigator();
export default function MainContainer(){
    return(
        <NavigationContainer>
            <Tab.Navigator
            initialRouteName={HomeScreenName}
            screenOptions={({route}) => ({
                tabBarIcon: ({focused,color,size}) => {
                    let iconName;
                    let rn=route.name;
                    if(rn === HomeScreenName){
                        iconName = focused ? 'home' : 'home-outline';
                    }
                    else if (rn === HistoryName){
                        iconName = focused ? 'history' : 'history-outline';
                    }
                    else if (rn ===  LocationName){
                        iconName = focused ? 'location' : 'location-outline';
                    }
                  return <Ionicons name={iconName} size={size} color={color}/>
                },
            })}
            >
            <Tab.Screen name={HomeScreenName} component={HomeScreen}/>
            <Tab.Screen name={HistoryName} component={HistoryScreen}/>
            <Tab.Screen name={LocationName} component={LocationScreen}/>
            </Tab.Navigator>
            
        </NavigationContainer>
    )
}

HomeScreen代码 #

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

export default function HomeScreen( {navigation} ){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
              <Text
                  onPress={()=> alert('This is the "Home" Screen')}
                  style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> HomeScreen</Text>
        </View>
    );
}

LocationScreen代码 #

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

export default function LocationScreen({navigation}){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
              <Text
                  onPress={() => navigation.navigate('Home')}
                  style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> LocationScreen</Text>
        </View>
    );
}

HistoryScreen代码 #

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

export default function HistoryScreen({navigation}){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
              <Text
                  onPress={() => alert('This is the "History" Screen')}
                  style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> HisoryScreen</Text>
        </View>
    );
}

排查与解决步骤 #

1. 校验文件路径与命名
   确认./screens/目录下存在对应文件，且文件名大小写完全匹配（React Native对文件名大小写敏感，比如HomeScreen.js和homescreen.js会被识别为不同文件）。

2. 确认组件导入方式
   你的组件均使用export default导出，当前import HomeScreen from './screens/HomeScreen'的引入方式是正确的，加大括号会触发错误（无对应命名导出）。

3. 清除项目缓存
   缓存异常可能导致组件识别错误，执行以下命令重启服务：

   npx react-native start --reset-cache
   

   之后重新编译项目（iOS需先执行npx pod-install）。

4. 检查依赖兼容性
   确保@react-navigation/native与@react-navigation/bottom-tabs版本匹配，可重新安装依赖：

   npm uninstall @react-navigation/native @react-navigation/bottom-tabs
   npm install @react-navigation/native @react-navigation/bottom-tabs
   

   同时确认依赖的基础库已安装：

   npm install react-native-screens react-native-safe-area-context
   

5. 排查组件定义冲突
   检查MainContainer.js中是否存在同名变量覆盖导入的组件（比如const HomeScreen = ...这类代码）。

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