Expo React Native底部导航异常：目标屏幕叠加在Home屏上方求助

问题成因 #

你把底部Tab导航嵌套在了Home组件内部，同时在Home里还渲染了ProductsList的内容。这种结构会让Tab切换时，Profile/Orders页面只能占据Tab栏上方的剩余空间，而Home的内容会一直留在屏幕上，不会被替换。

解决方案 #

正确的做法是把Tab Navigator作为应用的上层导航结构，将Home、Profile、Orders都作为Tab的独立屏幕，而不是在Home内部嵌套Tab导航。

修改步骤 #

1. 抽离Tab导航为独立组件，作为应用的导航根
2. 让Home组件仅负责自身内容的渲染，移除内部的Tab相关代码

修改后的代码示例 #

1. 新建独立的Tab导航组件（比如AppNavigator.js）

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
import colors from './colors';
import { AntDesign, Feather } from "@expo/vector-icons";
import Home from "./Home";
import Profile from "./Profile";
import Orders from "./Orders";

const Tab = createBottomTabNavigator();

const CustomTabBar = ({ state, descriptors, navigation }) => {
    const getTabBarIcon = (name, focused) => {
        switch (name) {
            case "Home":
                return <AntDesign name="home" size={24} color={focused ? colors.primary : colors.gray} />;
            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>
    );
};

const AppNavigator = () => {
    return (
        <Tab.Navigator tabBar={CustomTabBar}>
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Profile" component={Profile} />
            <Tab.Screen name="Orders" component={Orders} />
        </Tab.Navigator>
    );
};

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

export default AppNavigator;

2. 简化Home组件（移除内部Tab代码）

import React, { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView, View, StyleSheet } from "react-native";
import ProductsList from "../components/ProductsList";
import { listenForProducts } from "../products";

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

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

    return (
        <View style={styles.container}>
            <SafeAreaView className="flex-1 items-center justify-center bg-gray-200">
                <ProductsList products={products} />
                <StatusBar style={"dark"} />
            </SafeAreaView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#e5e5e5",
    },
});

export default Home;

修改说明 #

• Tab导航现在作为应用的上层结构，控制整个屏幕的内容切换，每个Tab对应的页面都会占据完整的屏幕空间
• Home组件回归本职，只负责渲染商品列表相关内容
• 新增了Home选项卡，保持底部导航的完整性

内容的提问来源于stack exchange，提问作者EdenMar