反应-本地滚动到带有平面列表的顶部 [英] React-Native scroll to top with Flatlist

问题描述

我在滚动到我的平面列表的顶部时遇到了很多问题，所以如果有任何帮助，我将不胜感激！

本质上，它从Firebase获取前5个项目，然后在调用onEndReached时，将接下来的5个项目追加到列表中：

data: [...this.state.data, ...results]

目前，我的视图顶部有一个刷新按钮，它执行以下操作：

this.flatListRef.scrollToOffset({ animated: true, y: 0 });

如果我在呈现前5个项目时单击此选项，它将按预期滚动到列表的顶部。只有在附加了列表之后才会出现问题(我猜这些项目不在可见范围内？)。

我也尝试了‘ScrollToItem’，但我猜这不起作用，因为Reaction Native文档中的以下内容：

注意：在以下情况下无法滚动到渲染窗口之外的位置 指定getItemLayout属性。

有谁能解释一下发生了什么事，或者知道我做错了什么吗？

提前感谢！

getItemLayout：(不完全确定这是做什么的，或者如何计算长度和偏移等)

getItemLayout = (data, index) => (
{ length: 50, offset: 50 * index, index }
)

return (
  <View>
    <FlatList
      ref={(ref) => { this.flatListRef = ref; }}
      onScroll={this.handleScroll}
      data={this.state.data}
      keyExtractor={item => item.key}
      ListFooterComponent={this.renderFooter()}
      onRefresh={this.handleRefresh}
      refreshing={this.state.newRefresh}
      onEndReached={this.handleEndRefresh}
      onEndReachedThreshold={0.05}
      getItemLayout={this.getItemLayout}
      renderItem={this.renderItem}
    />
    {this.state.refreshAvailable ? this.renderRefreshButton() : null}
  </View>
);

推荐答案

正确的语法是

this.flatListRef.scrollToOffset({ animated: true, offset: 0 });

您还可以使用

scrollToIndex

这篇关于反应-本地滚动到带有平面列表的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！