React Navigation：Stack嵌套BottomTab与不同TopTab导航需求

没问题，我帮你搞定这个嵌套导航的实现，完全匹配你要的层级结构！下面是具体的思路和代码示例：

先明确你的层级逻辑：
createStackNavigator → 包含HomeScreen和嵌套TopTab的BottomTab页面 → createBottomTabNavigator的每个Tab项对应独立的createMaterialTopTabNavigator

1. 先准备基础页面组件 #

先写几个测试用的页面，方便后续组合：

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

// TopTab测试页面1
const TabScreenA = () => (
  <View style={styles.screen}>
    <Text>Tab Screen A</Text>
  </View>
);

// TopTab测试页面2
const TabScreenB = () => (
  <View style={styles.screen}>
    <Text>Tab Screen B</Text>
  </View>
);

// 另一个TopTab的测试页面1
const TabScreenC = () => (
  <View style={styles.screen}>
    <Text>Tab Screen C</Text>
  </View>
);

// 另一个TopTab的测试页面2
const TabScreenD = () => (
  <View style={styles.screen}>
    <Text>Tab Screen D</Text>
  </View>
);

// 首页：点击按钮跳转到嵌套Tab的页面
const HomeScreen = ({ navigation }) => (
  <View style={styles.screen}>
    <Text>Home Screen</Text>
    <TouchableOpacity 
      style={styles.button}
      onPress={() => navigation.navigate('BottomTabContainer')}
    >
      <Text>进入嵌套Tab页面</Text>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    marginTop: 20,
    padding: 12,
    backgroundColor: '#2196F3',
    borderRadius: 6,
  },
});

2. 创建每个BottomTab对应的MaterialTopTab导航 #

每个BottomTab项绑定独立的TopTab导航，这样切换BottomTab时会显示完全不同的TopTab栏：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

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

// 第一个BottomTab对应的TopTab导航
const FirstTopTabNavigator = () => (
  <TopTab.Navigator
    screenOptions={{
      tabBarLabelStyle: { fontSize: 12 },
      tabBarStyle: { backgroundColor: '#fff' },
      tabBarActiveTintColor: '#2196F3',
    }}
  >
    <TopTab.Screen name="TabA" component={TabScreenA} options={{ title: '标签A' }} />
    <TopTab.Screen name="TabB" component={TabScreenB} options={{ title: '标签B' }} />
  </TopTab.Navigator>
);

// 第二个BottomTab对应的TopTab导航
const SecondTopTabNavigator = () => (
  <TopTab.Navigator
    screenOptions={{
      tabBarLabelStyle: { fontSize: 12 },
      tabBarStyle: { backgroundColor: '#f5f5f5' },
      tabBarActiveTintColor: '#FF5722',
    }}
  >
    <TopTab.Screen name="TabC" component={TabScreenC} options={{ title: '标签C' }} />
    <TopTab.Screen name="TabD" component={TabScreenD} options={{ title: '标签D' }} />
  </TopTab.Navigator>
);

3. 组装BottomTab导航容器 #

把两个TopTab导航作为BottomTab的子页面：

const BottomTabContainer = () => (
  <BottomTab.Navigator
    screenOptions={{
      tabBarActiveTintColor: '#2196F3',
      tabBarInactiveTintColor: '#888',
      tabBarLabelStyle: { fontSize: 11 },
    }}
  >
    <BottomTab.Screen 
      name="FirstTab" 
      component={FirstTopTabNavigator} 
      options={{ tabBarLabel: '第一组' }} 
    />
    <BottomTab.Screen 
      name="SecondTab" 
      component={SecondTopTabNavigator} 
      options={{ tabBarLabel: '第二组' }} 
    />
  </BottomTab.Navigator>
);

4. 最外层Stack导航容器 #

把首页和嵌套Tab的页面组合起来：

const AppNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen 
      name="Home" 
      component={HomeScreen} 
      options={{ title: '首页' }} 
    />
    <Stack.Screen 
      name="BottomTabContainer" 
      component={BottomTabContainer} 
      options={{ title: '标签容器' }} 
    />
  </Stack.Navigator>
);

// 最终渲染整个导航结构
export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

关键注意事项 #

• 每个BottomTab的子组件是独立的MaterialTopTabNavigator，切换BottomTab时会完全切换对应的TopTab栏，不会互相干扰
• 记得安装所需依赖：@react-navigation/native、@react-navigation/stack、@react-navigation/bottom-tabs、@react-navigation/material-top-tabs，以及原生依赖react-native-pager-view（用于TopTab的滑动切换）
• 如果需要自定义Tab图标，可以在BottomTab.Screen的options里添加tabBarIcon属性，TopTab同理

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