如何为 React Native FlatList 粘性设置动画 headers
How to animate React Native FlatList sticky headers
在这里您可以看到 nativebase.io 粘性 headers 示例:https://docs.nativebase.io/docs/examples/FlatListExample.html
效果很好,但是当它处于粘性位置时我需要更改粘性 header 高度,那么有什么办法可以做到吗?
我建议您使用 React-Native 的 SectionList
。它处理粘性 header 并且您可以访问道具:onViewableItemsChanged
。我用它来获取第一部分并对其进行处理(在你的情况下,你可以为每个部分添加一个 id 并保存粘贴部分的状态 header.
我的用例示例:
onViewableItemsChanged = ({ viewableItems }) => {
const topSection = viewableItems.find(item => !!item.section && item.section.date);
if (topSection) {
this.updateSelectedDate(topSection.section.date);
}
}
render() {
return (
<View style={styles.container}>
<SectionList
keyExtractor={item.id}
onViewableItemsChanged={this.onViewableItemsChanged}
renderItem={({ item }) => (
<EventListItem event={item} />
)}
renderSectionHeader={({ section }) =>
<View style={styles.sectionHeader}>
<Text style={styles.sectionHeaderText}>{I18n.l('date.formats.long_day_month_date_year', section.date.format('YYYY-MM-DD'))}</Text>
</View>
}
sections={this.assembleSections(this.props.events)}
/>
</View>
);
}
在 renderSectionHeader 中,您可以根据状态更改 header
希望对您有所帮助!
在这里您可以看到 nativebase.io 粘性 headers 示例:https://docs.nativebase.io/docs/examples/FlatListExample.html
效果很好,但是当它处于粘性位置时我需要更改粘性 header 高度,那么有什么办法可以做到吗?
我建议您使用 React-Native 的 SectionList
。它处理粘性 header 并且您可以访问道具:onViewableItemsChanged
。我用它来获取第一部分并对其进行处理(在你的情况下,你可以为每个部分添加一个 id 并保存粘贴部分的状态 header.
我的用例示例:
onViewableItemsChanged = ({ viewableItems }) => {
const topSection = viewableItems.find(item => !!item.section && item.section.date);
if (topSection) {
this.updateSelectedDate(topSection.section.date);
}
}
render() {
return (
<View style={styles.container}>
<SectionList
keyExtractor={item.id}
onViewableItemsChanged={this.onViewableItemsChanged}
renderItem={({ item }) => (
<EventListItem event={item} />
)}
renderSectionHeader={({ section }) =>
<View style={styles.sectionHeader}>
<Text style={styles.sectionHeaderText}>{I18n.l('date.formats.long_day_month_date_year', section.date.format('YYYY-MM-DD'))}</Text>
</View>
}
sections={this.assembleSections(this.props.events)}
/>
</View>
);
}
在 renderSectionHeader 中,您可以根据状态更改 header
希望对您有所帮助!