react-native - 添加新项目时防止 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 });

我希望这会奏效