任何帮助将不胜感激。我正在使用Expo React-Native和JavaScript，我试图为我的应用程序创建一个底部按钮栏，但它会导致我想要的屏幕出现在我的主屏幕上方：

在这张图片中，订单屏幕占据了屏幕的底部，而主屏幕仍然可见，即使我按下了订单按钮。我不确定是什么导致了这个问题。这是我的主屏幕的相关代码：

import React, { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView, View, TouchableOpacity, Text, StyleSheet } from "react-native";
import { useNavigation } from "@react-navigation/native";
import colors from '../colors';
import { AntDesign, Feather } from "@expo/vector-icons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import ProductsList from "../components/ProductsList";
import { listenForProducts } from "../products";
import Profile from "./Profile";
import Orders from "./Orders";

const Home = () => {
    const navigation = useNavigation();
    const [products, setProducts] = useState({});

    useEffect(() => {
        const unsubscribe = listenForProducts((products) => {
            setProducts(products);
        });
        return () => unsubscribe();
    }, []);

    const Tab = createBottomTabNavigator();

    return (
        <View style={styles.container}>
            <View style={{ flex: 1 }}>
                <SafeAreaView className="flex-1 items-center justify-center bg-gray-200">
                    <ProductsList products={products} />
                    <StatusBar style={"dark"} />
                </SafeAreaView>
            </View>
            <Tab.Navigator tabBar={CustomTabBar}>
                <Tab.Screen name="Profile" component={Profile} />
                <Tab.Screen name="Orders" component={Orders} />
            </Tab.Navigator>
        </View>
    );
};

const CustomTabBar = ({ state, descriptors, navigation }) => {
    const getTabBarIcon = (name, focused) => {
        switch (name) {
            case "Profile":
                return <AntDesign name="profile" size={24} color={focused ? colors.primary : colors.gray} />;
            case "Orders":
                return <Feather name="shopping-bag" size={24} color={focused ? colors.primary : colors.gray} />;
            default:
                return null;
        }
    };

    return (
        <View style={styles.tabBar}>
            {state.routes.map((route, index) => {
                const { options } = descriptors[route.key];
                const label = options.title !== undefined ? options.title : route.name;
                const isFocused = state.index === index;

                const onPress = () => {
                    const event = navigation.emit({
                        type: 'tabPress',
                        target: route.key,
                        canPreventDefault: true,
                    });

                    if (!isFocused && !event.defaultPrevented) {
                        navigation.navigate(route.name);
                    }
                };

                return (
                    <TouchableOpacity
                        key={route.key}
                        accessibilityRole="button"
                        accessibilityState={isFocused ? { selected: true } : {}}
                        accessibilityLabel={options.tabBarAccessibilityLabel}
                        testID={options.tabBarTestID}
                        onPress={onPress}
                        style={styles.tabBarButton}
                    >
                        {getTabBarIcon(label, isFocused)}
                        <Text style={{ color: isFocused ? colors.primary : colors.gray }}>
                            {label}
                        </Text>
                    </TouchableOpacity>
                );
            })}
        </View>
    );
};

export default Home;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#e5e5e5",
    },
    tabBar: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderTopWidth: 1,
        borderTopColor: colors.gray,
    },
    tabBarButton: {
        alignItems: 'center',
        paddingVertical: 10,
    },
});