如何在React Native中使用@react-navigation/bottom-tabs实现底部导航

First, install the required bottom tabs package:

npm install @react-navigation/bottom-tabs
# or
yarn add @react-navigation/bottom-tabs

Next, restructure your App.js to nest the bottom tab navigator inside the root stack. This setup keeps screens like enteremail tab-free while showing the bottom bar on Home and Profile.

Updated App.js Code #

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// Import your screen components (adjust paths to match your project)
import Email from './screens/Email';
import Settings from './screens/Settings';
import Profile from './screens/Profile';
import Home from './screens/Home';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// Bottom tab navigator for Home and Profile
function MainTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
        tabBarStyle: {
          backgroundColor: '#ffffff',
          borderTopWidth: 0,
        },
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: '500',
        },
        // Optional: Add custom icons with tabBarIcon prop here
      }}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}

// Optional: Nest Settings under Profile to keep bottom tab visible when accessing Settings
function ProfileStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}
// To use the nested stack, replace Profile in MainTabs with ProfileStack:
// <Tab.Screen name="Profile" component={ProfileStack} />

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={routeName}>
        <Stack.Screen name="enteremail" component={Email} />
        {/* Keep Settings in root stack if you don't want bottom tab on Settings screen */}
        <Stack.Screen name="settings" component={Settings} />
        {/* Nest the bottom tab navigator as a root stack screen */}
        <Stack.Screen name="MainTabs" component={MainTabs} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Navigation Usage #

• From enteremail to Home: Use navigation.navigate('MainTabs') (the tab navigator's initial route is Home, so this lands you directly there with the bottom bar visible).
• Switch between Home and Profile: Use navigation.navigate('Home') or navigation.navigate('Profile') from either tab.
• Access Settings:
  • If using the nested ProfileStack: Call navigation.navigate('Settings') from Profile (bottom tab remains visible).
  • If Settings is in the root stack: Call navigation.navigate('settings') (bottom tab will be hidden).

Key Benefits #

• The official @react-navigation/bottom-tabs is performance-optimized, fixing the卡顿 issue from your custom Pressable/Text implementation.
• Customize the tab bar's appearance via screenOptions (colors, icons, label styles, etc.).
• Maintain full access to all existing screens while adding the bottom tab functionality.

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