React Native中能否将SectionList的data字段替换为agent等自定义字段？

当然可以把SectionList默认要求的data字段替换成agent、items这类自定义字段，只需要在组件配置中适配自定义结构即可，具体步骤如下：

1. 定义自定义结构的数据源 #

直接使用你提供的带agent字段的数组即可：

const DATA = [
  { title: 'Main dishes', agent: ['Pizza', 'Burger', 'Risotto'] },
  { title: 'Sides', agent: ['French Fries', 'Onion Rings', 'Fried Shrimps'] },
  { title: 'Drinks', agent: ['Water', 'Coke', 'Beer'] },
  { title: 'Desserts', agent: ['Cheese Cake', 'Ice Cream'] },
];

2. 配置SectionList组件适配自定义字段 #

SectionList提供了官方属性来适配自定义的section结构，推荐使用getItem和getItemCount来指定数据获取逻辑，这样renderItem可以直接拿到对应项：

import { SectionList, Text, View } from 'react-native';

export default function CustomSectionList() {
  return (
    <SectionList
      // 传入自定义结构的数据源
      sections={DATA}
      // 为每个项生成唯一key
      keyExtractor={(item, index) => `${item}-${index}`}
      // 指定如何从section中获取对应索引的项
      getItem={(section, index) => section.agent[index]}
      // 指定每个section中的项数量
      getItemCount={(section) => section.agent.length}
      // 渲染列表项
      renderItem={({ item }) => (
        <View style={{ padding: 12, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' }}>
          <Text>{item}</Text>
        </View>
      )}
      // 渲染section头部
      renderSectionHeader={({ section }) => (
        <View style={{ padding: 12, backgroundColor: '#f5f5f5' }}>
          <Text style={{ fontSize: 16, fontWeight: '600' }}>{section.title}</Text>
        </View>
      )}
    />
  );
}

另一种简化方式 #

如果不想额外配置getItem和getItemCount，也可以直接在renderItem中通过section参数结合index取自定义字段的项：

renderItem={({ index, section }) => (
  <View style={{ padding: 12 }}>
    <Text>{section.agent[index]}</Text>
  </View>
)}

核心逻辑 #

SectionList并不强制要求section必须包含data字段，它只是默认会读取section.data来获取列表项。通过getItem和getItemCount可以完全自定义数据的读取规则，适配任意你需要的section字段名。

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