如何先显示平面列表最后一部分？

Question

我开发了一个聊天应用程序。当客户选择聊天时，我必须首先向他们显示最后一条聊天消息。我这样使用

scrollToEnd

：

this.flatListRef.current.scrollToEnd({animated:false});

但它显示向下滚动运动。当他们进入聊天室时，我不想显示滚动动作。如何使用 React Native 首先显示平面列表最后一部分？

我使用 firestore，React Native。

这是有关该问题的视频：https://youtu.be/X2XdbOZI21s

Answer 1

可以使用

inverted

的道具

FlatList

<Flatlist 
  ref={flatListRef} 
  inverted 
  data={messages} 
  renderItem={renderItem} 
/>

信息：https://reactnative.dev/docs/flatlist#inverted

Answer 2

当我必须实现类似的东西（还有聊天）时，我只是反转放置在

data

的

FlatList

道具中的数组。这意味着您不必滚动到“最后一个”项目，因为列表中的最后一个项目将首先显示。 假设您的数据数组名为

messages = [...]

，在您的

FlatList

中只需将其放入

data={messages.reverse()}

并查看其行为。

此外，通过这样做并避免滚动到最后一项，考虑到可能有很多消息，效率会更高

Answer 3

设置

inverted={true}

或者您可以使用

ListFooterComponent

<FlatList
        data={UserListData}
        keyExtractor={(item, index) => index.toString()}
        renderItem={renderItem}
        refreshing={refreshing}
        onRefresh={handleRefresh}
        inverted={true}
    />