Question

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

那很好，但是当我处于粘性位置时，我需要更改粘性标头的高度，所以有什么办法吗？

Answer 1

我建议您使用React-Native的SectionList。它处理粘性标头，您可以访问道具：onViewableItemsChanged。我用它来获取第一部分并对其进行处理（在您的情况下，您可以在每个部分中添加一个ID并保存粘贴的部分标题的状态。

我的用例示例：

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中，您可以根据状态更改标题

希望它会有所帮助！

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

1 个答案: