React Navigation Tab导航：能否通过单个类切换不同屏幕？

完全没问题，React Navigation的Tab导航组件（比如BottomTabNavigator）并不要求每个Tab必须对应独立的组件类，你可以轻松在单个Monument组件内部完成不同Tab内容的切换，核心是通过参数传递+条件渲染来实现。

具体实现步骤 #

• 第一步：在Tab导航的配置中，让所有Tab都指向你的Monument组件，同时给每个Tab传递唯一的标识参数（比如tabCategory）
• 第二步：在Monument组件内部，根据接收到的标识参数，条件渲染对应的子组件内容

代码示例 #

1. 配置Tab导航（以React Navigation v5+为例）

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

const Tab = createBottomTabNavigator();

function TabNavigator() {
  // 假设你的公共数据已经准备好
  const sharedData = { /* 你的数据内容 */ };

  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="CategoryA" 
        component={Monument} 
        initialParams={{ tabCategory: 'A', data: sharedData }}
        options={{ title: '分类A' }}
      />
      <Tab.Screen 
        name="CategoryB" 
        component={Monument} 
        initialParams={{ tabCategory: 'B', data: sharedData }}
        options={{ title: '分类B' }}
      />
      <Tab.Screen 
        name="CategoryC" 
        component={Monument} 
        initialParams={{ tabCategory: 'C', data: sharedData }}
        options={{ title: '分类C' }}
      />
    </Tab.Navigator>
  );
}

2. 修改你的Monument组件

class Monument extends Component{ 
  render(){ 
    // 旧版React Navigation（v4及以下）用this.props.navigation.state.params获取参数
    const { data, tabCategory } = this.props.route.params;

    // 根据tabCategory切换不同的MonumentMaker内容
    const renderTabContent = () => {
      switch(tabCategory) {
        case 'A':
          return <MonumentMaker category="A" data={data} />;
        case 'B':
          return <MonumentMaker category="B" data={data} />;
        case 'C':
          return <MonumentMaker category="C" data={data} />;
        default:
          return <View><Text>默认内容</Text></View>;
      }
    };

    return (
      <View style={{ flex: 1 }}>
        {renderTabContent()}
      </View>
    );
  }
}

补充说明 #

• 每个Tab的图标、样式等都可以在Tab.Screen的options里单独配置，不会因为共用组件而受影响
• 你也可以把条件渲染的逻辑抽成单独的函数，让代码更清晰易维护

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