如何在Bottom Tab导航中嵌套Top Tabs并修复代码问题？

问题分析 #

原代码存在两个关键错误：

• TopTabNavigator组件未返回导航器JSX，导致顶部标签栏无法渲染
• 底部标签导航器中错误使用TopTab.Screen，需替换为BottomTab.Screen

修复后的完整代码 #

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications!</Text>
    </View>
  );
}

const TopTab = createMaterialTopTabNavigator();
const BottomTab = createBottomTabNavigator();

// 修复：添加return语句，确保组件返回导航器
const TopTabNavigator = () => {
  return (
    <TopTab.Navigator>
      <TopTab.Screen name="Post Room" component={FeedScreen} />
      <TopTab.Screen name="Rooms" component={NotificationsScreen} />
    </TopTab.Navigator>
  );
};

export const App = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator screenOptions={{ headerShown: false }}>
        {/* 修复：使用BottomTab.Screen而非TopTab.Screen */}
        <BottomTab.Screen name="TopTabs" component={TopTabNavigator} />
        <BottomTab.Screen name="Rooms" component={NotificationsScreen} />
      </BottomTab.Navigator>
    </NavigationContainer>
  );
};

export default App;

关键修复点说明 #

1. 补充return语句：函数组件必须返回JSX元素，原代码缺少return导致顶部标签栏无法渲染
2. 替换Screen类型：底部标签导航器的子项必须是BottomTab.Screen，原错误使用TopTab.Screen会导致导航逻辑失效
3. 保留头部隐藏设置：screenOptions={{ headerShown: false }}确保底部标签页的头部不显示，符合需求

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