如何在react-navigation的BottomTabs中实现多余tab的「更多」折叠功能？

完全基于React Navigation原生的嵌套导航能力实现，不需要引入外部依赖，仅需少量自定义代码即可符合需求。

步骤1：拆分Tab配置，搭建嵌套导航结构 #

把所有主Tab分为两部分：前4个为直接展示在底部栏的常规Tab，剩余需要隐藏的Tab统一放到「更多」Tab对应的嵌套Stack导航中，Stack的初始路由为更多功能列表页。

代码示例：
首先导入依赖：

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

定义「更多」模块的嵌套Stack：

const MoreStack = createStackNavigator();
// 更多模块导航容器
function MoreStackScreen() {
  return (
    <MoreStack.Navigator screenOptions={{ headerShown: false }}>
      {/* 初始路由：更多功能列表页 */}
      <MoreStack.Screen name="MoreList" component={MoreListScreen} />
      {/* 下方注册所有需要隐藏的Tab页面 */}
      <MoreStack.Screen name="Setting" component={SettingScreen} />
      <MoreStack.Screen name="Profile" component={ProfileScreen} />
      <MoreStack.Screen name="Message" component={MessageScreen} />
    </MoreStack.Navigator>
  );
}

配置主底部Tab导航：

const MainTab = createBottomTabNavigator();
function App() {
  return (
    <MainTab.Navigator>
      {/* 前4个常规展示的Tab */}
      <MainTab.Screen name="首页" component={HomeScreen} />
      <MainTab.Screen name="商城" component={ShopScreen} />
      <MainTab.Screen name="订单" component={OrderScreen} />
      <MainTab.Screen name="购物车" component={CartScreen} />
      {/* 「更多」入口Tab，绑定上面的嵌套Stack */}
      <MainTab.Screen name="更多" component={MoreStackScreen} />
    </MainTab.Navigator>
  );
}

步骤2：实现更多功能列表页 #

列表页仅需渲染隐藏Tab的入口，点击跳转用React Navigation原生的navigate方法即可，跳转后和普通Tab页面交互完全一致：

// MoreListScreen.js
import { View, Text, TouchableOpacity } from 'react-native';

export default function MoreListScreen({ navigation }) {
  // 隐藏Tab的配置列表，可根据业务自行扩展
  const hiddenTabs = [
    { label: '设置', route: 'Setting' },
    { label: '个人中心', route: 'Profile' },
    { label: '消息通知', route: 'Message' },
  ];

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      {hiddenTabs.map(item => (
        <TouchableOpacity
          key={item.route}
          onPress={() => navigation.navigate(item.route)}
          style={{
            paddingVertical: 16,
            paddingHorizontal: 16,
            borderBottomWidth: 1,
            borderBottomColor: '#f0f0f0',
          }}
        >
          <Text>{item.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

步骤3：可选优化配置（符合原生交互习惯） #

如果需要实现从更多列表跳转到隐藏Tab页面时，底部Tab栏自动隐藏，仅停留在更多列表页时展示Tab栏，可以通过主Tab的tabBarVisible配置实现，完全是原生支持的配置项：
修改主Tab的Navigator配置：

<MainTab.Navigator
  screenOptions={({ route }) => ({
    tabBarVisible: (() => {
      // 仅「更多」Tab的初始列表页展示Tab栏，子页面自动隐藏
      if (route.name === '更多') {
        return route.state?.index === 0;
      }
      return true;
    })(),
  })}
>
  {/* Tab配置和之前一致 */}
</MainTab.Navigator>

额外说明 #

• 所有隐藏页面的跳转完全符合React Navigation导航规范，从其他Tab跳转到隐藏页面可以直接用navigation.navigate('更多', { screen: 'Setting' })实现。
• 跳转至隐藏页面时，底部Tab的「更多」项会保持选中状态，符合交互预期。

内容的提问来源于stack exchange，提问作者Esben von Buchwald