React Native Expo中如何实现抽屉导航+底部标签栏且不使用嵌套导航器

核心方案 #

不用嵌套TabNavigator，而是自定义一个纯UI的底部标签栏组件，通过抽屉导航的navigation对象直接切换路由。这样所有屏幕始终由抽屉导航器管理，完全避免屏幕重复的问题。

具体实现步骤 #

1. 正常配置抽屉导航器，定义所有需要的目标屏幕
2. 编写自定义底部标签栏组件，每个标签对应抽屉里的一个路由
3. 将这个标签栏组件添加到抽屉导航的每个屏幕中（或通过全局布局统一注入）

代码示例 #

1. 配置抽屉导航器

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import SettingsScreen from './screens/SettingsScreen';
import BottomTabs from './components/BottomTabs';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen 
          name="Home" 
          component={HomeScreen} 
          options={{
            // 为当前屏幕挂载底部标签栏
            headerBottom: () => <BottomTabs />
          }}
        />
        <Drawer.Screen 
          name="Profile" 
          component={ProfileScreen} 
          options={{
            headerBottom: () => <BottomTabs />
          }}
        />
        <Drawer.Screen 
          name="Settings" 
          component={SettingsScreen} 
          options={{
            headerBottom: () => <BottomTabs />
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

2. 自定义底部标签栏组件

import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation, useRoute } from '@react-navigation/native';

const BottomTabs = () => {
  const navigation = useNavigation();
  const route = useRoute();

  // 定义标签与路由、图标的映射关系
  const tabs = [
    { name: 'Home', icon: 'home-outline', activeIcon: 'home' },
    { name: 'Profile', icon: 'person-outline', activeIcon: 'person' },
    { name: 'Settings', icon: 'settings-outline', activeIcon: 'settings' },
  ];

  return (
    <View style={styles.container}>
      {tabs.map((tab) => (
        <TouchableOpacity
          key={tab.name}
          style={styles.tabItem}
          onPress={() => navigation.navigate(tab.name)}
        >
          <Ionicons
            name={route.name === tab.name ? tab.activeIcon : tab.icon}
            size={24}
            color={route.name === tab.name ? '#2196F3' : '#888'}
          />
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 60,
    borderTopWidth: 1,
    borderTopColor: '#eee',
    backgroundColor: '#fff',
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default BottomTabs;

非react-navigation的UI组件推荐 #

如果不想手动编写UI，可以直接使用第三方组件，仅需绑定导航逻辑：

• react-native-paper BottomNavigation：Material Design风格的底部导航栏，传入点击切换函数即可使用
• react-native-elements BottomNavigation：轻量级UI组件，支持高度自定义样式
• expo-navigation-bar：Expo官方提供的系统级导航栏组件，需自行处理交互逻辑

这些组件均不依赖react-navigation导航器，仅在点击事件中调用navigation.navigate()即可切换抽屉路由。

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