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

Question

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

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

我试着打电话 scrollToOffset在 onContentSizeChange ，但这有一个一秒钟的延迟，滚动来回跳跃。

我怎样才能让列表行为当我将项目添加到顶部和底部时，以同样的方式 ，通过在屏幕上保留相同的消息而不是显示新消息？

Answer 1

这是演示:https://snack.expo.io/@nomi9995/flatlisttest
解决方案1:
使用 maintainVisibleContentPosition在 IOS 中防止自动滚动的 Prop ，但不幸的是，它不适用于 android。但这里是安卓的公关Pull Request .在合并这个 PR 之前，你可以从这个 PR 自己修补

<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偏移量+内容高度差!