React Native自定义底部导航栏导入后Tab页面覆盖问题求助

问题描述 #

我在React Native项目中实现了包含Home、Category、Profile、Cart四个Tab页面的自定义底部导航栏。将该导航栏导入TestScreen后，点击导航栏的Tab页面时，其内容会覆盖TestScreen原有内容，页面显示极不规范。若将TestScreen加入导航栏Tab页面会使Tab数量变为5个，不符合Figma设计的4个Tab要求。尝试新建CustomTabBar修改路由名称，但问题未解决，寻求解决方案。

问题截图 #

自定义底部导航栏（BottomNavigator.js） #

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { useIsFocused } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';
import HomeScreen from '../../../screens/HomeScreen';
import ProfileScreen from '../../../screens/ProfileScreen';
import CategoryScreen from '../../../screens/CategoryScreen';
import CartScreen from '../../../screens/CartScreen';
import Products from '../Products';
import SearchScreen from '../../../screens/SearchScreen';
import { Colors } from '../../../src/components/consts/Colors';

const Tab = createBottomTabNavigator();

const BottomNavigator = () => {
  const isFocused = useIsFocused();

  const [cartTotalProducts, setCartTotalProducts] = useState(0);


  useEffect(() => {

  }, [isFocused]);

  return isFocused ? (
    <Tab.Navigator initialRouteName="Home"  
          screenOptions={{
        headerStyle: { backgroundColor: 'orange' },
        headerShown: false,
        tabBarActiveTintColor: 'orange',
      }}> 

    <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color = 'orange' }) => (
            <Icon name="home-filled" color={color} size={28} />
          ),
        }}
      />
      <Tab.Screen
        name="Categories"
        component={CategoryScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="list" color={color} size={28} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="person" color={color} size={28} />
          ),
        }}
      />
      <Tab.Screen
        name="Cart"
        component={CartScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="shopping-cart" color={color} size={28} />
          ),
          
          tabBarVisible: true,
        }}
      />
      
    </Tab.Navigator>
  ) : (
    <View />
  );
};

export default BottomNavigator;

App.js代码 #

import React, { useState } from 'react';
import HomeScreen from './screens/HomeScreen';
import WelcomeScreen from './screens/WelcomeScreen'
import SecondScreen from './screens/SecondScreen';
import ScannerScreen from './screens/ScannerScreen';
import ThirdScreen from './screens/ThirdScreen';
import SkipButton from './screens/SkipButton';
import AddPhotoScreen from './screens/AddPhotoScreen';
import SocialMediaScreen from './screens/SocialMediaScreen';
import SignupScreen from './screens/SignupScreen';
import LoginScreen from './screens/LoginScreen';
import ForgotPasswordScreen from './screens/ForgotPasswordScreen';
import ResetPasswordScreen from './screens/ResetPasswordScreen';
import InterestsScreen from './screens/InterestsScreen';
import OnboardScreen from './screens/OnboardScreen';
import BottomNavigator from './src/components/navigation/BottomNavigator';
import CollectRewardScreen from './screens/CollectRewardScreen';
import GoalScreen from './screens/GoalScreen';
import PhotoUploadScreen from './screens/PhotoUploadScreen';
import Products from './src/components/Products';
import CategoryScreen from './screens/CategoryScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ProductScreen from './screens/ProductScreen';
import CartScreen from './screens/CartScreen';
import PasswordResetSuccess from './screens/PasswordResetSuccess';
import OrderScreen from './screens/OrderScreen';
import CartDetailScreen from './screens/CartDetailScreen';
import CustomTabBar from './src/components/navigation/CustomTabBar';
import FlashMessage from "react-native-flash-message";
import { LogBox } from 'react-native';
import TestScreen from './screens/TestScreen';

const Stack = createStackNavigator();
function App() {

  const [cartTotalProducts, setCartTotalProducts] = useState(0);
  LogBox.ignoreAllLogs(); //Ignore all log notifications

  console.log('carttta' + cartTotalProducts)

  return (
    <NavigationContainer>
      <FlashMessage position="top" />
      <Stack.Navigator initialRouteName="Welcome">
        <Stack.Screen component={WelcomeScreen} name="Welcome" options={{ headerShown: false }} />
        <Stack.Screen component={BottomNavigator} name="Home" options={{ headerShown: false }} />
        <Stack.Screen component={HomeScreen} name="First" options={{ headerShown: false }} />
        <Stack.Screen component={SecondScreen} name="Second" options={{ headerShown: false }} />
        <Stack.Screen component={ThirdScreen} name="Third" options={{ headerShown: false }} />
        <Stack.Screen component={ScannerScreen} name="Scanner" options={{ headerShown: false }} />
        <Stack.Screen component={SkipButton} name="Skip" options={{ headerShown: false }} />
        <Stack.Screen component={CollectRewardScreen} name="Collect" options={{ headerShown: false }} />
        <Stack.Screen component={AddPhotoScreen} name="Pic" options={{ headerShown: false }} />
        <Stack.Screen component={SocialMediaScreen} name="Socials" options={{ headerShown: false }} />
        <Stack.Screen component={SignupScreen} name="Signup" options={{ headerShown: false }} />
        <Stack.Screen component={LoginScreen} name="Login" options={{ headerShown: false }} />
        <Stack.Screen component={ForgotPasswordScreen} name="Fgetpwd" options={{ headerShown: false }} />
        <Stack.Screen component={ResetPasswordScreen} name="Reset" options={{ headerShown: false }} />
        <Stack.Screen component={OnboardScreen} name="Onboard" options={{ headerShown: false }} />
        <Stack.Screen component={InterestsScreen} name="Interests" options={{ headerShown: false }} />
        <Stack.Screen component={GoalScreen} name="Goals" options={{ headerShown: false }} />
        <Stack.Screen component={PhotoUploadScreen} name="Upload" options={{ headerShown: false }} />
        <Stack.Screen component={Products} name="Myproducts" options={{ headerShown: false }} />
        <Stack.Screen component={CategoryScreen} name="Category" options={{ headerShown: false }} />
        <Stack.Screen component={ProductScreen} name="Pdsn" options={{ headerShown: false }} />
         <Stack.Screen component={CartScreen } name="Cart" options={{ headerShown: false }} />
        <Stack.Screen component={PasswordResetSuccess} name="ResetSuccess" options={{ headerShown: false }} />
        <Stack.Screen component={OrderScreen} name="Order" options={{ headerShown: false }} />
        <Stack.Screen component={CartDetailScreen} name="Details" options={{ headerShown: false }} />
        <Stack.Screen component={CustomTabBar} name="CustBar" options={{ headerShown: false }} />
        <Stack.Screen component={TestScreen} name="Test" options={{ headerShown: false }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

TestScreen代码 #

import React from 'react'
import { View, Text,StyleSheet } from 'react-native'
import BottomNavigator from '../src/components/navigation/BottomNavigator'

const TestScreen = () => {
  return (
    <View style={{flex: 1,
        backgroundColor: '#FFFFFF',
        padding: 16,}} >
    <View>
        <Text>Test Screen</Text>
        <Text>Test Screen where my Tabscreens (Home,Categories,Profile and Cart) are appearing.This makes the screen looks unprofessional.</Text>
    </View>
    <BottomNavigator />
    </View>
  )
}

export default TestScreen

CustomTabBar代码 #

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { useIsFocused } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';
import HomeScreen from '../../../screens/HomeScreen';
import ProfileScreen from '../../../screens/ProfileScreen';
import CategoryScreen from '../../../screens/CategoryScreen';
import CartScreen from '../../../screens/CartScreen';
import Products from '../Products';
import SearchScreen from '../../../screens/SearchScreen';
import { Colors } from '../consts/Colors';

const Tab = createBottomTabNavigator();

const CustomTabBar = () => {
  const isFocused = useIsFocused();

  const [cartTotalProducts, setCartTotalProducts] = useState(0);

  useEffect(() => {
    // any necessary logic to be executed when the screen is focused
  }, [isFocused]);

  return isFocused ? (
    <Tab.Navigator initialRouteName="First"  
          screenOptions={{
        headerStyle: { backgroundColor: 'orange' },
        headerShown: false,
        tabBarActiveTintColor: 'orange',
      }}> 

    <Tab.Screen
        name="First"
        component={HomeScreen}
        tabLabel="Home"
        options={{
          tabBarIcon: ({ color = 'orange' }) => (
            <Icon name="home-filled" color={color} size={28} />
          ),
        }}
      />
      <Tab.Screen
        name="Categories"
        component={CategoryScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="list" color={color} size={28} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="person" color={color} size={28} />
          ),
        }}
      />
      <Tab.Screen
        name="Cart"
        component={CartScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <Icon name="shopping-cart" color={color} size={28} />
          ),
          // set tabBarVisible to false for screens where you don't want the bottom navigators to appear
          tabBarVisible: true,
        }}
      />
      
    </Tab.Navigator>
  ) : (
    <View />
  );
};

export default CustomTabBar;

解决方案 #

问题核心是你把整个Tab导航器直接嵌套在TestScreen的视图里，导致Tab的页面内容会占据整个屏幕空间，和TestScreen的原有文本重叠。同时，当前的导航结构把所有页面都放在根Stack里，不符合底部导航栏作为主入口的设计逻辑。

方案1：将TestScreen加入底部导航的某个Tab的子栈（推荐） #

把TestScreen作为HomeTab的子页面，既保持4个Tab的设计，又避免内容重叠：

1. 修改BottomNavigator，为HomeTab创建子栈：

// 在BottomNavigator.js顶部导入createStackNavigator
import { createStackNavigator } from '@react-navigation/stack';
import TestScreen from '../../../screens/TestScreen';

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator screenOptions={{ headerShown: false }}>
      <HomeStack.Screen name="HomeMain" component={HomeScreen} />
      <HomeStack.Screen name="Test" component={TestScreen} />
    </HomeStack.Navigator>
  );
}

// 替换原Home的Tab.Screen组件
<Tab.Screen
  name="Home"
  component={HomeStackScreen}
  options={{
    tabBarIcon: ({ color = 'orange' }) => (
      <Icon name="home-filled" color={color} size={28} />
    ),
  }}
/>

2. 移除App.js中单独的<Stack.Screen component={TestScreen} name="Test" ... />项。

3. 修改TestScreen，删除底部导航器的导入和渲染：

import React from 'react'
import { View, Text,StyleSheet } from 'react-native'

const TestScreen = () => {
  return (
    <View style={{flex: 1,
        backgroundColor: '#FFFFFF',
        padding: 16,}} >
      <View>
        <Text>Test Screen</Text>
        <Text>Test Screen where my Tabscreens (Home,Categories,Profile and Cart) are appearing.This makes the screen looks unprofessional.</Text>
      </View>
    </View>
  )
}

export default TestScreen

方案2：将TestScreen作为独立栈页面，进入时隐藏底部导航栏 #

如果需要TestScreen完全独立，可在根栈中配置进入时隐藏底部导航：

1. 修改App.js中的TestScreen栈项：

<Stack.Screen 
  component={TestScreen} 
  name="Test" 
  options={({ navigation }) => ({
    headerShown: false,
    tabBarStyle: { display: 'none' }, // 隐藏底部导航栏
  })} 
/>

2. 同样删除TestScreen中的BottomNavigator导入和渲染。

额外优化 #

• 删除重复的CustomTabBar组件，复用BottomNavigator即可。
• 避免在屏幕中直接嵌套整个Tab导航器，通过React Navigation的嵌套导航管理层级，避免导航逻辑混乱。

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