基于关键 React Native 的 Flatlist Header

Question

const data = [
   {
    "name": "AAXx",
    "number" "111111"
    "type": "employee",
   },
   {
    "name": "bbbs",
    "number" "2222"
    "type": "employee",
   },
   {
    "name": "xxx",
    "number" "3333"
    "type": "students",
   },
]

<FlatList
            data={data}
            keyExtractor={item => item.number }
            renderItem={({ item }) => <Text> {item.name}</Text>
/>

当前结果

AAXx

bbbs

xxx

预期结果

雇用

AAXx

bbbs

学生

xxx

我已经尝试过 ListHeaderComponent 但我希望这个基于键（类型）。 我怎样才能用这个数据集达到预期的效果。

谢谢。

Answer 1

您需要 SectionList 而不是 FlatList。

您还需要将您的数据分组到sections，以便 SectionList 可以了解它应该如何列出哪些部分下的项目。

const DATA = [
  {
    title: 'employee',
    data: [{
      name: 'AAXx',
      number: '111111',
    },
    {
      name: 'bbbs',
      number: '2222',
    }],
  },
  {
    title: 'students',
    data: [{
      name: 'xxx',
      number: '3333',
    },
    ],
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item.number}
      renderItem={({ item }) => <Item title={item.name} />}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  </SafeAreaView>
);

https://snack.expo.io/@nicefella82/sectionlist-example