React-Native 使用 Flatlist 滚动到顶部

Question

我在滚动到我的平面列表顶部时遇到了很多麻烦，所以任何帮助都将不胜感激！

本质上，它从 firebase 获取前 5 个项目，然后当调用 onEndReached 时，我们将接下来的 5 个项目附加到列表中：

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

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

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

如果我在呈现前 5 个项目时单击它，它会按预期滚动到列表顶部。仅在将列表附加到后才会出现此问题（我猜这些项目不在视图中？）。

我也尝试过“ScrollToItem”，但我猜这不起作用，因为 React 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>
);

原文由 Dereck 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正确的语法是

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

你也可以使用

滚动到索引

原文由 Nati Sholman Oskar 发布，翻译遵循 CC BY-SA 4.0 许可协议