当屏幕上显示大量文本时，Android 上的倒置 Flatlist 的性能很差

Question

我正在构建一个聊天应用程序，从React-Native版本开始0.63，当Android上的倒置 Flatlist 中涉及长文本时，我的性能很差。

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

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

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

Answer 1

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

 return (
  <FlatList
    // ...
    style={{scaleY: -1}}
    renderItem={({item}) => {
      return (
        <View style={{scaleY: -1}}>
          {/* cell content */}
        </View
      );
    }}
  >
);

Answer 2

实际上，该Flatlist组件以更好的方式编写，比其他列表组件（如ScrollView. 但您应该考虑一下，对于像聊天这样的很长的列表，有一些原则：

• 唯一键：为了以最佳方式缓存和重新排序唯一键，您需要传递唯一键，因为ReactJS只需使用，item.key如果它不存在，则使用它，这是性能问题的根源，所以，您应该使用名称为的 prop并创建一个好的函数来生成唯一的键。ReactJSindexkeyExtractor

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

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

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

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