添加新项目时防止 FlatList 滚动

Question

我FlatList在我的聊天应用程序中垂直倒置，它在底部显示最新消息，在顶部显示最旧消息（就像所有其他聊天应用程序一样）
问题是当我想将新消息添加到列表底部时，FlatList自动跳转到底部列表！
我所需要的只是防止在这种情况下滚动

这是我的FlatList：

<FlatList
  inverted
  style={{flex: 1}}
  data={this.state.data}
  keyExtractor={(item, index) => item.id}
  renderItem={this.renderItem}
/>

这是将最新消息添加到列表的代码

const data = [ ...newMessages, ...this.state.data ];
this.setState({ data });

Answer 1

您的案例看起来很简单，但您要在顶部添加新消息，然后使用inverted标志将其反转到底部最后一个位置

可以inverted简单地删除标志并最后添加新项目const data = [...this.state.data, ...newMessages];

<FlatList
  style={{flex: 1}}
  data={this.state.data}
  keyExtractor={(item, index) => item.id}
  renderItem={this.renderItem}
/>

const data = [...this.state.data, ...newMessages];
this.setState({ data });

我希望这会起作用