如何为React Native FlatLists创建自动项目分隔符?

Question

我有一个在FlatList中呈现的事件列表。我希望有一个分压器，每当事件是在不同的日期-又名当{item.eventID。一个给定项目的eventDate}与它之前的一个不同(我已经知道如何调用服务器来按顺序返回日期)。

是否有方法自动生成这些分隔符?

下面是FlatList每一项的函数:

function Item({ item }) {
return (
<View>
<Text>{item.eventID.eventDate}</Text>
<Text>{item.eventID.artistName}</Text>
<Text>{item.ticketID}</Text>
</View>
);
}

这是我的类组件的页面:

export default class MyEventsScreen extends Component {
state = {
tickets: [],
};
componentDidMount = () => {
fetch("http://127.0.0.1:8000/api/fullticket/", {
method: "GET",
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
tickets: responseJson,
});
})
.catch((error) => {
console.error(error);
});
};
render() {
return (
<View>
<FlatList
style={{ flex: 1 }}
data={this.state.tickets}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={(item) => item.ticketID}
/>          
</View>
);
}
}

Answer 1

您可以编写一个自定义函数，在日期值发生变化时呈现除法。

新的Item函数和renderDivider:

let prevDate = ""
function renderDivider(date) {
if(prevDate === "" || date !== prevDate) {
prevDate = date //initialize prevDate
return <Text style={styles.divider}>----{date}---</Text>
}
}
function Item({ item }) {
return (
<View>
{renderDivider(item.eventID.eventDate)}
<Text>{item.eventID.artistName}</Text>
</View>
);
}
const styles = StyleSheet.create({
divider: {
marginVertical: 15,
fontWeight: '700',
color: 'rgb(100,100,100)'
}
});