Question

我正在使用React-native Flat List，其中我将排序后的数组传递给数据道具。现在我想根据日期显示项目我的代码：

 <FlatList
   horizontal={true}
   keyExtractor={(item, index) => index.toString()}
   data={this.state.Data}
   renderItem={({ item }) =>
     <View>
       <Image source = {{uri: item.image}}/>
       <Text>{item.date}</Text>
     </View>                           
    }
 />

我要根据item.date显示图像。例如：

Date - 20-09-2018
Image1 ..Image 2...
Date - 21-09-2018
Image1..Image2 ...

救救我！

Answer 1

您可以为此目的使用SectionList，因为它提供了处理此类情况的良好API。

<SectionList
    style={{ flex: 1 }}
    keyExtractor={(item, index) => index.toString()}
    renderItem={this.renderItem}
    renderSectionHeader={this.renderSectionHeader}
    sections={list || []}
    ItemSeparatorComponent={this.renderSeparator}
/>

为此，您需要映射数据并像创建对象数组一样创建

[
    {
        heading: 'Date - 20-09-2018',
        data: [Image1, Image2]
    },
    {
        heading: 'Date - 21-09-2018',
        data: [Image1, Image2]
    }
]

renderSectionHeader函数将类似于：

renderSectionHeader = ({section}) => {
    return (
        <View>
            <Text>{section.heading}</Text>
        </View>
    )
}

以及您可以根据需要定义的所有其他函数，例如renderItem，renderSeparator等。

Check this link for more info

如何在本机中处理平面清单项目数据？

1 个答案: