React Native列表项点击跳转新页面优化方案咨询

核心思路是用组件-路由映射表替代大量if条件判断，把nestedId和对应页面/组件做关联，后续新增或修改项时只需要更新映射表，不用改动逻辑代码，大幅提升维护性。

步骤1：定义组件映射表 #

创建一个对象，将每个nestedId与对应的页面组件（或路由名称）一一对应，建议单独抽成一个文件（比如src/config/screenMappings.js）方便统一维护：

// screenMappings.js
import OpeningHoursScreen from '../screens/OpeningHoursScreen';
import TarifsScreen from '../screens/TarifsScreen';
// 导入其他页面组件

export const ScreenMap = {
  'opening-hours': OpeningHoursScreen,
  'tarifs': TarifsScreen,
  // 新增项时直接在这里添加键值对即可
};

// 如果用React Navigation的路由名称，也可以直接映射路由字符串：
// export const RouteMap = {
//   'opening-hours': 'OpeningHours',
//   'tarifs': 'Tarifs',
// };

步骤2：修改点击跳转逻辑 #

在列表项的点击事件中，直接从映射表中获取目标页面，再执行导航操作（以React Navigation为例）：

import { ScreenMap } from '../config/screenMappings';

const handleItemPress = (nestedId) => {
  const TargetScreen = ScreenMap[nestedId];
  if (TargetScreen) {
    // 若导航配置中用的是组件name属性作为路由名
    navigation.navigate(TargetScreen.name);
    // 或者直接用路由字符串映射：navigation.navigate(RouteMap[nestedId]);
  } else {
    // 处理未匹配的异常情况，避免崩溃
    console.warn(`未找到对应页面：${nestedId}`);
  }
};

步骤3：列表渲染简化 #

列表项的渲染无需额外判断，直接传递item.nestedId给点击事件即可：

// 假设你的列表数据结构如下
const listData = [
  { id: '1', nestedId: 'opening-hours', label: 'Horaires d’ouverture' },
  { id: '2', nestedId: 'tarifs', label: 'Tarifs' },
  // 更多列表项
];

// 列表渲染
return (
  <FlatList
    data={listData}
    keyExtractor={item => item.id}
    renderItem={({ item }) => (
      <Pressable onPress={() => handleItemPress(item.nestedId)}>
        <Text>{item.label}</Text>
      </Pressable>
    )}
  />
);

额外优化点 #

1. 统一维护：映射表单独抽离后，新增页面只需要在映射表中添加一行，不用修改业务逻辑代码。
2. 类型校验：如果用TypeScript，可以给映射表定义类型，避免拼写错误。
3. 默认处理：对于未匹配的nestedId，可以添加默认页面或提示，提升用户体验。

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