当屏幕上有大量文本时,Android上的反向平面列表的性能非常糟糕

当屏幕上有大量文本时,Android上的反向平面列表的性能非常糟糕,android,react-native,react-native-flatlist,flatlist,Android,React Native,React Native Flatlist,Flatlist,我正在构建一个聊天应用程序,由于React Native版本0.63,在Android上,当反向平面列表中出现长文本时,我的性能非常糟糕 是一个显示问题的零食复制程序(仅当在物理Android手机上尝试时可见) 。它应该是相当公然的任何人谁是建立一个聊天应用程序与倒置的平面列表,但不知何故,我看不到这个问题正在谈论任何地方 这让我觉得也许其他人已经解决了这个问题?如果是,我如何解决它呢?这使得我的应用程序现在几乎无法使用。事实上,Flatlist组件的编写方式比其他列表组件(如ScrollVie

我正在构建一个聊天应用程序,由于
React Native
版本
0.63
,在Android上,当反向平面列表中出现长文本时,我的性能非常糟糕

是一个显示问题的零食复制程序(仅当在物理Android手机上尝试时可见)

。它应该是相当公然的任何人谁是建立一个聊天应用程序与倒置的平面列表,但不知何故,我看不到这个问题正在谈论任何地方


这让我觉得也许其他人已经解决了这个问题?如果是,我如何解决它呢?这使得我的应用程序现在几乎无法使用。

事实上,
Flatlist
组件的编写方式比其他列表组件(如
ScrollView
)的性能更好。但是你应该考虑一个很长的列表,比如聊天:
  • 唯一键:要以最佳方式缓存和重新排序唯一键,您必须传递唯一键,因为
    ReactJS
    只需使用
    项。键
    ,如果它不存在,则使用
    ReactJS
    索引,这是性能问题的根源,SO,您应该使用名称为的道具,并使用一个良好的函数来生成唯一的关键点

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

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

  • 删除剪辑的项目:为此,您可以使用道具名称,但请注意它。也许在某些情况下它有bug


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

您好,我已经使用了所有这些技巧。但是,正如您在零食中所看到的,最基本的反向平面列表足以触发问题。它只有30块文字,没有什么特别的。。。因此,在这种情况下,上述选项都不能真正提高性能。@RyanPergent,我看到了零食链接,但您没有使用
keyExtractor
getItemLayout
。是的,但我以前尝试过,但没有成功。此外,我认为,如果项目具有“键”值(如在我的零食中),则不需要使用
keydectractor
。此外,我相信
keydractor
getItemLayout
在您有一个包含许多要渲染的项目的大列表时非常有用,对吗?这小吃只有30个项目,根本没有重新渲染。@RyanPergent,我会尽快在我的本地计算机上获取您的小吃代码并进行测试。我很快会在这里报告。@RyanPergent,我在我的本地计算机上测试了你的零食代码,你在零食URL中插入了更大的文本内容,但在Android和iOS上没有问题,我测试了它们。你说糟糕的性能是什么意思?我已经在我的android设备上测试了你的零食,从我收集的信息中没有感觉到任何问题,似乎它只发生在某些设备上。在我使用Android 11的Pixel 4上,这个问题非常明显。我可以问一下你用的是什么设备吗?我用的是三星galaxy s7 edge。我面临的性能问题与android api 30上的反向平面列表完全相同。。。你想出解决办法了吗?@Kirill不幸的是,我没有找到任何解决办法。只是等待它被修复。。。