在React native中

Question

如何分隔数据以使部分列表看起来像图片中的样子？

https://i.stack.imgur.com/oABMf.png

Answer 1

这取决于您拥有的数据结构。假设您具有这种数据结构：

const data = [
  {
    id: 1,
    text: "Fooo text 1",
    description: "Foooo description 1"
  },
  {
    id: 2,
    text: "Fooo text 2",
    description: "Foooo description 2"
  },
] 

function ListScreen() {
  const sections = [] 
  sections.push({ title: 'Title', data: data });

  return (
    <SectionList
      sections={sections}
      renderItem={({ item, index }) => <Text>{item.id}</Text>}
      renderSectionHeader={SectionHeader}
      keyExtractor={(item, index) => item.id.toString()}
    />
  );
}

function SectionHeader({ section: { title } }) {
  return (
    <View style={styles.sectionHeader}>
      <Text>{title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  sectionHeader: {
    padding: 12,
  },
});