React Native Expo中如何在单导航器下实现静态顶部栏与底部导航栏？

首先明确：React Navigation 完全支持嵌套导航器，不存在「只能使用一个导航器」的限制，你可能误解了相关规则。结合你的需求（顶部栏带logo和购物车、底部导航含home/search/settings、首页加Top Tabs），以下是具体实现方案：

导航层级设计 #

推荐的嵌套逻辑：

• 最外层：Stack 导航器（处理全局页面跳转，比如从商品页到详情页、购物车页）
• Stack 内部嵌入：Bottom Tabs 导航器（承载三个底部标签页）
• Bottom Tabs 的 home 页面内嵌套：Material Top Tabs 导航器（实现首页的顶部标签切换）

这种结构既保留底部导航的全局可用性，又能在首页内实现顶部标签切换，同时用Stack统一管理跨页面跳转。

分步实现代码 #

1. 安装依赖 #

确保安装Material Top Tabs所需包：

npm install @react-navigation/material-top-tabs react-native-tab-view

2. 定义Top Tabs子页面 #

先创建顶部标签对应的页面组件：

import { View, Text } from 'react-native';

function HomeTab1() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>首页标签页1</Text>
    </View>
  );
}

function HomeTab2() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>首页标签页2</Text>
    </View>
  );
}

3. 在Home页面嵌套Top Tabs并自定义顶部栏 #

在Home页面中集成Top Tabs，同时替换默认头部为带logo和购物车的自定义栏：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { View, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons'; // 需提前安装react-native-vector-icons

const TopTabs = createMaterialTopTabNavigator();

function HomeScreen({ navigation }) {
  return (
    <TopTabs.Navigator
      screenOptions={{
        // 自定义顶部导航栏
        header: () => (
          <View style={{ height: 60, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, backgroundColor: '#fff' }}>
            <Image source={require('./assets/logo.png')} style={{ width: 80, height: 40 }} />
            <TouchableOpacity onPress={() => navigation.navigate('Cart')}>
              <Icon name="shopping-cart" size={24} color="#333" />
            </TouchableOpacity>
          </View>
        ),
        // 配置顶部标签栏样式
        tabBarLabelStyle: { fontSize: 14 },
        tabBarStyle: { backgroundColor: '#f5f5f5' },
      }}
    >
      <TopTabs.Screen name="Tab1" component={HomeTab1} options={{ title: '标签一' }} />
      <TopTabs.Screen name="Tab2" component={HomeTab2} options={{ title: '标签二' }} />
    </TopTabs.Navigator>
  );
}

4. 配置Bottom Tabs导航器 #

将HomeScreen（含Top Tabs）、Search、Settings页面放入底部导航：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const BottomTabs = createBottomTabNavigator();

function BottomTabNavigator() {
  return (
    <BottomTabs.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#2196F3',
        tabBarInactiveTintColor: '#999',
      }}
    >
      <BottomTabs.Screen 
        name="Home" 
        component={HomeScreen} 
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({ color }) => <Icon name="home" size={24} color={color} />
        }} 
      />
      <BottomTabs.Screen 
        name="Search" 
        component={SearchScreen} // 需自行定义SearchScreen组件
        options={{
          tabBarLabel: '搜索',
          tabBarIcon: ({ color }) => <Icon name="search" size={24} color={color} />
        }} 
      />
      <BottomTabs.Screen 
        name="Settings" 
        component={SettingsScreen} // 需自行定义SettingsScreen组件
        options={{
          tabBarLabel: '设置',
          tabBarIcon: ({ color }) => <Icon name="settings" size={24} color={color} />
        }} 
      />
    </BottomTabs.Navigator>
  );
}

5. 配置最外层Stack导航器 #

将BottomTabNavigator和全局页面（如购物车）放入Stack：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* 底部导航作为主入口，隐藏默认头部 */}
        <Stack.Screen name="Main" component={BottomTabNavigator} options={{ headerShown: false }} />
        {/* 购物车页面，通过顶部栏图标跳转 */}
        <Stack.Screen name="Cart" component={CartScreen} options={{ title: '购物车' }} /> {/* 需自行定义CartScreen */}
        {/* 其他全局页面，比如商品详情页 */}
        <Stack.Screen name="ProductDetail" component={ProductDetailScreen} /> {/* 需自行定义 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

注意事项 #

• 嵌套导航器的navigation对象是分层的，在Top Tabs页面内跳转全局页面时，直接用navigation.navigate('Cart')即可，因为Stack是最外层导航器。
• 如果需要在其他底部标签页（如Search）添加Top Tabs，只需在对应页面内重复嵌套Top Tabs导航器即可。
• 自定义顶部栏时，可根据需求调整样式（比如logo尺寸、背景色、图标样式）。

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