ScrollView - 滚动仍然相同的位置当我在数组前面添加元素时

Question

我正在使用react-native进行聊天应用。当我向上滚动时，我想接受旧消息。当我向上滚动时，我在数组前添加元素但滚动仍然停止相同的位置。但我想像whatsapp一样。

我怎样才能做到这一点？

Answer 1

使用FlatList和inverted true。在inverted模式下，FlatList项目将从下到上显示。使用onEndReached回调将OLD消息加载到数组（FlatList的数据源）中。

例

...
<FlatList
   data={/*data source*/}
   renderItem={/*item renderer*/}
   keyExtractor={/*Key Extractor*/}
   onEndReached={this.loadOldMessages}
   onEndThreshold={0.5}
   inverted
/>
...

根据上面的示例，当列表中的所有项目都显示（用户已到达结束）时，将调用this.loadOldMessages函数，此时您应该提取新数据（旧消息）并添加到数组中。

希望这会有所帮助！

Answer 2

你应该使用FlatList而不是ScrollView。

例：

FlatList：

<FlatList
   onEndReached={this.handleLoadMessages}
   onEndThreshold={0.5}
   data={this.messages}
   renderItem={(message) => <Text>{message}</Text>}
   inverted
/>

handleLoadMessages：

handleLoadMessages() {
  const generateNewMessage = () => `message: ${Math.floor((Math.random() * 1000) + 1)}`;

  this.setState({
    messages: [
      ...this.state.messages,
      ...[
        generateNewMessage(),
        generateNewMessage(),
        generateNewMessage(),
        generateNewMessage(),
        generateNewMessage(),
      ],
    ]
  });
}