添加新项目时防止倒置的 Flatlist 滚动到底部

Question

我正在构建一个聊天应用程序，使用倒置的Flatlist. 我在onEndReached调用时将新项目添加到列表顶部，并且一切正常。

问题是，如果将项目添加到底部，它会立即滚动到列表底部。这意味着用户必须向上滚动才能阅读刚刚添加的消息（这很糟糕）。

我试图调用scrollToOffsetin onContentSizeChange，但这有 1 秒的延迟，滚动来回跳跃。

当我将项目添加到顶部和底部时，如何通过在屏幕上保留相同的消息而不是显示新消息来使列表行为相同？

Answer 1

这是演示：https: //snack.expo.io/@nomi9995/flatlisttest

解决方案一：

使用maintainVisibleContentPosition属性来防止自动滚动，注意：maintainVisibleContentPosition最近被添加到android中，所以你应该使用最新版本的react native

<FlatList
  ref={(ref) => { this.chatFlatList = ref; }}
  style={styles.flatList}
  data={this.state.items}
  renderItem={this._renderItem}
  maintainVisibleContentPosition={{
     minIndexForVisible: 0,
  }}
/>

解决方案2：

我找到了另一种解决方法，即使用onScroll保留最新的 y 偏移量，并使用onContentSizeChange添加新项目之前和之后保存内容高度，并计算内容高度的差值，并将新的 y 偏移量设置为最新的 y 偏移量 + 内容高度差！

Answer 2

您尝试过使用 keyExtractor 吗？它可能有助于反应避免重新渲染，因此请尝试为每个项目使用唯一的键。您可以在这里阅读更多相关信息：https ://reactnative.dev/docs/flatlist#keyextractor