如何摆脱导航选项卡栏上选项卡处于活动状态时出现的灰色背景 React Native

问：

当每个图标处于活动状态时，每个图标上都有一个灰色背景。我不知道如何摆脱它。我到处寻找并尝试了很多解决方案，但似乎没有任何效果。我不确定我是否把代码放在了错误的地方。或者使用错误的代码，但它似乎没有响应任何事情。 如果有人知道如何解决它，将不胜感激。

我将附上我所得到的图片。我只想摆脱灰色背景，在此处输入图像描述

    import { createNativeStackNavigator }  from "@react-navigation/native-stack";
    import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
    import { Ionicons } from "@expo/vector-icons";
    import { Foundation, FontAwesome5, MaterialIcons, } from "@expo/vector-icons";
    import HomeScreen from "../screens/homeFolder/homeScreen";
    import ProfilePage from "../screens/profilePageFolder/profilePage";
    import YourShopPage from "../screens/yourShopFolder/yourShop";
    import YourTicketsPage from "../screens/yourTicketFolder/yourTickets";


   const Stack = createNativeStackNavigator();

   const RootNavigator = () => {
     return (
         <Stack.Navigator screenOptions={{headerShown: true, 
            headerStyle:{backgroundColor: "#1d1d1d", 
            borderStyle: "none", }, headerTintColor: '#fff', headerTitleAlign: "center", }}>
            <Stack.Screen name="HomeTabs" component={HomeTabs} />
         </Stack.Navigator>
       );
   };

    const Tab = createMaterialBottomTabNavigator();
    const HomeTabs = () => {
    return ( 
        <Tab.Navigator 
            barStyle={{backgroundColor: "#2d2d2d"}}
            activeColor="#9C3CF4"
            inactiveColor="#ffffff"
    
            >
                <Tab.Screen 
                    name="Home" 
                    component={HomeScreen} 
                    options={{ tabBarIcon: ({color}) => (
                        <Ionicons name="home-outline" size={24} color="white"/>
                    ), tabBarActiveTintColor:"blue",
                    }}
                />
                <Tab.Screen 
                    name = "Your Tickets" 
                    component={YourTicketsPage}
                    options={{tabBarIcon: ({color}) => (
                        <Ionicons name="wallet-outline" size={24} color="white"/>
                    ), 
                    }}
                />
                <Tab.Screen 
                    name = "Your Shop" 
                    component={YourShopPage}
                    options={{tabBarIcon: ({color}) => (
                        <Ionicons name="business-outline" size={24} color="white" />
                    ), 
                    }}
                />
                <Tab.Screen 
                    name = "Profile" 
                    component={ProfilePage}
                    options={{tabBarIcon: ({color}) => (
                        <Ionicons name="person-outline" size={24} color="white"/>
                    ),
                    }}
                />
            </Tab.Navigator>
        );
    };

    export default RootNavigator;

这是我的应用程序导航模块的代码。