Javascript 如何摆脱导航底边？

我正在尝试在React Native中使用带有React导航的自定义选项卡导航器。然而，出于某种原因，如果我改变了页面的背景颜色，那么即使不应该改变，导航也会占用空间？我的意思是：

以下是选项卡导航器和背景色设置为红色的屏幕示例：

对于上面的屏幕，容器的唯一样式是：

    alignItems: "center",
    backgroundColor:"red",
    justifyContent: "center",
    flex: 1,
  }

以下是选项卡导航器的代码：

import routes from "./routes";
import {View, Text, TouchableOpacity, Dimensions, StyleSheet, Image} from 'react-native'
import HomeButton from "./HomeButton";
import CardsScreen from "../screens/CardsScreen";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import AccountNavigator from "./AccountNavigator";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import defaultStyles from "../config/defaultStyles";
import HomeNavigator from "./HomeNavigator";
import { Feather } from '@expo/vector-icons'; 
import { FontAwesome5 } from '@expo/vector-icons'; 
import { MaterialIcons } from '@expo/vector-icons'; 

const Tab = createBottomTabNavigator();
const window = Dimensions.get("window")

const CustomTabBar = ({state, descriptors, navigation}) => {
  let button;
  return(
    <View style={styles.bottomContainer}>
      {state.routes.map((route, index) => {
        const clicked = state.index === index;
        {route.name==="Home" ? button=
        <TouchableOpacity key={route.name}  onPress={()=>{
          if (!clicked) {
            navigation.navigate(route.name);
          }
        }} 
        style={{flex: 1}}
        accessibilityRole="button"
        accessibilityState={clicked ? { selected: true } : {}}
        delayPressIn={0}
        >
            <View style={styles.homeButton}>
              <Feather name="home" size={35} color="white" /> 
            </View>
        </TouchableOpacity> 
        : 
        button=
        <TouchableOpacity key={route.name} onPress={()=>{
          if (!clicked) {
            navigation.navigate(route.name);
          }
        }} 
        style={{flex: 1}}
        accessibilityRole="button"
        accessibilityState={clicked ? { selected: true } : {}}
        delayPressIn={0}
        >
          <View style={styles.sideButton}>
            {route.name==="Account"? <FontAwesome5 name="user-circle" size={window.width*0.09} color="#6C6CE5" />:
            <MaterialIcons name="credit-card" size={window.width*0.104} color="#6C6CE5" />
            }
          </View>
        </TouchableOpacity>}
        return button;
      })}
    </View>
  )
}

const TabNavigator = (props) => (
    <>
      <Tab.Navigator
        initialRouteName="Home"
        barStyle={{ backgroundColor: defaultStyles.colors.white }}
        activeColor={defaultStyles.colors.white}
        tabBar={(props) => <CustomTabBar {...props}/>}
      >
        <Tab.Screen
          name="Cards"
          component={CardsScreen}
          // options={{
          //   tabBarIcon: ({ color, size }) => (
          //     <MaterialCommunityIcons
          //       name="credit-card-outline"
          //       size={27}
          //       color={color}
          //     />
          //   ),
          // }}
        />
        <Tab.Screen
          name="Home"
          component={HomeNavigator}
          // options={({ navigation }) => ({
          //   tabBarButton: () => (
          //     <HomeButton onPress={() => props.navigation.navigate(routes.HOME)} />
          //   ),
          //   headerShown: false,
          // })}
        />
  
        <Tab.Screen
          name="Account"
          component={AccountNavigator}
          // options={{
          //   tabBarIcon: ({ color, size }) => (
          //     <MaterialCommunityIcons name="account" size={27} color={color} />
          //   ),
          // }}
        />
      </Tab.Navigator>
    </>
  );

  const styles = StyleSheet.create({
    bottomContainer: {
      flexDirection: 'row', 
      alignItems: 'center',
      bottom: window.height*0.05,
      borderRadius: 25,
      backgroundColor: 'white',
      marginHorizontal: window.width*0.07,
      height: window.height*0.069,
      shadowColor: "#6C6CE5",
      shadowRadius: 15,
      //shadowOffset: {width: 4, height: 4},
      shadowOpacity: 0.3
    },
    homeButton: {
      width: window.width*0.213,
      height: window.width*0.213,
      backgroundColor: "#6C6CE5",
      alignSelf: 'center',
      borderRadius: window.width*0.213/2,
      alignItems: 'center',
      justifyContent: 'center',

    },
    homeIcon: {
      height: 32,
      width: 37
    },
    sideButton: {
      justifyContent: 'center',
      alignItems: 'center',
    }
  })

  export default TabNavigator;

从“/routes”导入路由；
从“react native”导入{视图、文本、TouchableOpacity、维度、样式表、图像}
从“/HomeButton”导入HomeButton；
从“./screens/cardscreen”导入卡片屏幕；
从“@expo/vector icons”导入{MaterialCommunityIcons}”；
从“/AccountNavigator”导入AccountNavigator；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}”；
从“./config/defaultStyles”导入默认样式；
从“/HomeNavigator”导入HomeNavigator；
从“@expo/vector icons”导入{Feather}；
从“@expo/vector icons”导入{FontAwesome5}”；
从“@expo/vector icons”导入{MaterialIcons}；
const Tab=createBottomTabNavigator（）；
const window=Dimensions.get（“窗口”）
const CustomTabBar=（{状态，描述符，导航}）=>{
让按钮；
返回(
{state.routes.map（（路由，索引）=>{
const clicked=state.index==index；
{route.name===“Home”？按钮=
{
如果（！单击）{
导航.导航（路线.名称）；
}
}} 
style={{flex:1}}
accessibilityRole=“按钮”
accessibilityState={单击？{所选：true}:{}
delayPressIn={0}
>
: 
钮扣=
{
如果（！单击）{
导航.导航（路线.名称）；
}
}} 
style={{flex:1}}
accessibilityRole=“按钮”
accessibilityState={单击？{所选：true}:{}
delayPressIn={0}
>
{route.name==“帐户”？：
}
}
返回按钮；
})}
)
}
常量选项卡导航器=（道具）=>(
}
>
(
//     
//   ),
// }}
/>
({
//tabBarButton:（）=>(
//props.navigation.navigate（routes.HOME）}/>
//   ),
//校长：错，
// })}
/>
(
//     
//   ),
// }}
/>
);
const styles=StyleSheet.create({
底部容器：{
flexDirection:'行'，
对齐项目：“居中”，
底部：窗户。高度*0.05，
边界半径：25，
背景颜色：“白色”，
边缘水平：窗宽*0.07，
高度：窗高*0.069，
阴影颜色：“6C6CE5”，
阴影半径：15，
//阴影偏移：{宽度：4，高度：4}，
阴影不透明度：0.3
},
主页按钮：{
宽度：窗宽*0.213，
高度：窗宽*0.213，
背景色：“6C6CE5”，
对齐自我：“中心”，
边界半径：窗宽*0.213/2，
对齐项目：“居中”，
为内容辩护：“中心”，
},
主页图标：{
身高：32，
宽度：37
},
侧按钮：{
为内容辩护：“中心”，
对齐项目：“居中”，
}
})
导出默认选项卡导航器；