React Native中BottomTabNavigator无法显示求助（React Navigation 5）

Hey there, let's dig into why your BottomTabNavigator isn't showing up in the DrawerHome screen as expected. The core issue here is how you've structured your navigation layers—right now, your TabComp is set up as a separate screen in your root StackNavigator, but you actually need to nest it inside the DrawerHome component instead. Let's fix this step by step:

Step 1: Clean up your root StackNavigator #

First, remove the standalone Tab screen from your root Stack, since we don't need it as a top-level route anymore:

const Stack = createStackNavigator();
export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator headerMode="none" initialRouteName="HomePage">
          <Stack.Screen name="Home" component={HomePage} />
          <Stack.Screen name="Login" component={LoginSignUp} />
          <Stack.Screen name="DrawerScreenss" component={DrawerScreens} />
          {/* Remove the Tab screen entry here */}
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Step 2: Nest the TabNavigator inside DrawerHome #

Next, move your tab navigation logic directly into the DrawerHome component. This ensures the tab bar renders whenever DrawerHome is active. Note: I've renamed the original DrawerHome content to HomeContent to avoid circular references (since you previously tried to use DrawerHome as a tab screen):

// DrawerHome.js
import React, { Component } from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import HomeContent from "./HomeContent"; // Replace with your original DrawerHome content
import Bookmarks from "./Bookmarks";

const Tab = createBottomTabNavigator();

export default class DrawerHome extends Component {
  render() {
    return (
      <Tab.Navigator 
        initialRouteName="Home" 
        tabBarOptions={{
          activeTintColor: "#e91e63",
          inactiveTintColor: "grey",
          style: { backgroundColor: "white", borderTopColor: "red" },
          labelStyle: { fontSize: 12, fontWeight: "normal" },
          indicatorStyle: { borderBottomColor: "red", borderBottomWidth: 4 }
        }} 
      >
        <Tab.Screen name="Home" component={HomeContent} />
        <Tab.Screen name="Bookmarks" component={Bookmarks} />
      </Tab.Navigator>
    );
  }
}

Why this works #

Your navigation structure now follows the correct nested hierarchy:
Root Stack → Drawer Navigator → DrawerHome → Bottom Tab Navigator

When you navigate to the DrawerScreenss route and select DrawHome from the drawer, the DrawerHome component will render the tab navigator, making the bottom tab bar visible as expected.

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