6

我正在构建一个聊天应用程序，并且从React-Native版本开始，当在Android0.63上的倒置 Flatlist 上涉及长文本时，我的表现很糟糕。

这是一个展示该问题的小吃重现（仅在尝试使用物理 Android 手机时可见）。

我报告了一个错误。对于任何使用倒置 Flatlist 构建聊天应用程序的人来说，这应该是相当公然的，但不知何故，我看不到任何地方都在谈论这个问题。

这让我觉得也许其他人已经以某种方式解决了它？如果是，我该如何解决？它使我的应用程序现在几乎无法使用。

4

2 回答 2

2

实际上，该Flatlist组件的编写方式比其他列表组件（如ScrollView. 但是你应该考虑到对于一个很长的列表，比如聊天，几乎没有原则：

  • 唯一键：为了让唯一键以最佳方式缓存和重新排序，您应该传递唯一键，因为ReactJS只是使用item.key，如果它不存在，则ReactJS使用index它是性能问题的根源，所以，你应该使用 name 的道具keyExtractor并制作一个很好的函数来生成唯一的键。

  • 跳过动态内容的测量：为了避免在每次重新渲染中重新计算项目测量，您可以使用名称为的道具getItemLayout并传递width, height,offset等index添加getItemLayout可以帮助您长期获得巨大的性能提升包含多个项目的列表。

  • 确定初始项目的数量：您可以确定要加载的项目数量并避免显示看到的项目，这可能有点棘手，但我想使用initialNumToRender可以帮助您进行初始加载，在初始之后您可以修剪看到的项目它们是不在视图屏幕中。

  • 删除剪辑项目：为此，您可以使用该名称的道具名称，removeClippedSubviews但要关心它。也许它在某些情况下有错误。

根据我的经验，这些方法可以提高长列表的性能。我希望这些对您有所帮助，也许还有其他一些技巧可以提高性能。

于 2020-10-11T22:16:12.457 回答
2

我通过将样式应用于平面列表和渲染视图来解决它。这是 android 11 的某种问题，因为在以前的版本中，倒排列表不会发生这种情况。将样式添加scaleY: -1到平面列表和要渲染的视图的容器中，如下所示：

 return (
  <FlatList
    // ...
    style={{scaleY: -1}}
    renderItem={({item}) => {
      return (
        <View style={{scaleY: -1}}>
          {/* cell content */}
        </View
      );
    }}
  >
);
于 2021-07-02T19:41:07.800 回答