如何为 React Native FlatList 粘性设置动画 headers

Question

在这里您可以看到 nativebase.io 粘性 headers 示例：https://docs.nativebase.io/docs/examples/FlatListExample.html

效果很好，但是当它处于粘性位置时我需要更改粘性 header 高度，那么有什么办法可以做到吗？

Answer 1

我建议您使用 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

希望对您有所帮助！

如何为 React Native FlatList 粘性设置动画 headers

How to animate React Native FlatList sticky headers

react-native

react-native-flatlist