React Native多实体页面跳转问题：替代if-else/switch实现新增页导航

核心思路：用配置映射表替代条件判断 #

把实体类型和对应的新增页面做键值对映射，后续新增实体时只需扩展配置表，无需修改跳转逻辑代码，更符合开闭原则。

具体实现步骤 #

1. 定义实体-页面映射配置 #

先创建配置对象，关联每个实体类型与对应新增页面组件：

// 导入新增页面组件
import AddEmployee from './pages/AddEmployee';
import AddDepartment from './pages/AddDepartment';
import AddDesignation from './pages/AddDesignation';

// 实体-新增页面映射表
const entityAddPageMap = {
  Employee: AddEmployee,
  Department: AddDepartment,
  Designation: AddDesignation,
};

如果你的路由是用名称注册的（比如在NavigationContainer中定义的路由名），也可以把映射表改成实体对应路由名称：

const entityAddRouteMap = {
  Employee: 'AddEmployee',
  Department: 'AddDepartment',
  Designation: 'AddDesignation',
};

2. 在页面中使用映射表处理跳转 #

以React Navigation为例，在实体页面的加号按钮点击事件中，直接通过实体类型从映射表取目标页面/路由名完成跳转：

// Designation页面示例，其他实体页面逻辑完全一致
const DesignationScreen = ({ navigation }) => {
  const handleAddPress = () => {
    // 若用组件映射
    const AddPage = entityAddPageMap['Designation'];
    navigation.navigate(AddPage.name);

    // 若用路由名映射
    // navigation.navigate(entityAddRouteMap['Designation']);
  };

  return (
    <View>
      {/* 页面原有内容 */}
      <TouchableOpacity onPress={handleAddPress}>
        <Text style={{ fontSize: 24 }}>+</Text>
      </TouchableOpacity>
    </View>
  );
};

3. 扩展新实体的便捷性 #

后续新增实体（比如Project）时，只需两步：

• 新增AddProject页面组件
• 在映射表中添加一行：Project: AddProject（或对应路由名）
  完全不用修改现有跳转逻辑，维护成本极低。

额外优化：统一封装跳转逻辑 #

可以把跳转逻辑封装成工具函数，在所有实体页面复用：

// utils/navigationHelpers.js
import { entityAddRouteMap } from '../configs/entityConfig';

export const navigateToAddPage = (navigation, entityType) => {
  const routeName = entityAddRouteMap[entityType];
  if (!routeName) {
    console.warn(`未配置实体${entityType}的新增页面`);
    return;
  }
  navigation.navigate(routeName);
};

在页面中直接调用：

import { navigateToAddPage } from '../utils/navigationHelpers';

const DesignationScreen = ({ navigation }) => {
  const handleAddPress = () => {
    navigateToAddPage(navigation, 'Designation');
  };

  // ...页面其他内容
};

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