我编写了一个MainContainer.js文件作为我的基于react-native的应用的按钮导航栏。在这里定义标签的屏幕时（使用Tab.Screen），我似乎总是得到这个错误：

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

我尝试过的一件事是删除所有的代码，只是发出一个简单的消息，唉，它似乎工作，这可能意味着所有其他依赖项都工作正常，只有我的代码有问题。
有人能帮忙吗？：）
编码：

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>
    )
}

(P.S我也试着把我的HistoryScreen、LoctionScreen和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>
    );
}

位置屏幕代码：

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>
    );
}

历史屏幕代码：

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>
    );
}