인터넷 보면서 바텀네비게이션을 만들어 보려고 했는데요, 이렇게 만들어봤는데 오류는 안뜨는데 화면에 탭이 생성이 안됩니다! 어디가 잘못된걸까요?

import React from 'react';

import { Platform } from 'react-native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import MainPage from '../pages/MainPage';

import HomeScreen from '../pages/HomeScreen';

import ChatScreen from '../pages/ChatScreen';

import SettingsScreen from '../pages/SettingsScreen';

import {Ionicons} from '@expo/vector-icons'

const Tab = createBottomTabNavigator();

const TabNavigator = ({navigation, route}) =>{

  return(

    <Tab.Navigator

    screenOptions={({route})=>({

      tabBarShowLabel: true,

      tabBarStyle:{

        backgroundColor:'black',

        borderTopColorL:'#eee',

        height:40,

        fontSize:10,

      },

      tabBarIcon:({focused})=>{

        let iconName = Platform.OS==='ios'?'ios-' :'md-'

        if(route.name==='MaingPage'|| route.name==='ChatPage'){

          iconName+='list';

        }else if (route,name==='HomeScreen') {

          iconName+='apps-outline'

        }else if (route,name==='SettingsScreen') {

          iconName+='person'

        }

        return(

          <Ionicons

          name={iconName}

          color={focused?'hotpink' :'grey'}

          size={26}

          />

        )

      },

    })}  

>

    <Tab.Screen name="HomeScreen" component={HomeScreen} />

    <Tab.Screen name="SettingsScreen" component={SettingsScreen} />

    <Tab.Screen name="ChatScreen" component={ChatScreen} />

    <Tab.Screen name="MainPage" component={MainPage} />

  </Tab.Navigator>

  )

}

export default TabNavigator