首页 > 解决方案 > React Native:FlatList 闪烁的项目列表很大,而不是较小的列表

问题描述

这是正在发生的事情:

-我正在用 RN 开发一个博客应用程序。每个用户都有一个个人资料页面,用户撰写的所有帖子都可以在其中看到。

- 每个帖子都有一个缩略图,我正在按照我应该的方式渲染 FlatList 中的帖子。

- 但是,如果列表足够大,例如 100+,则帖子中的图像在向上/向下滚动时会闪烁,适用于 iOS 和 Android。这是可以理解的糟糕的用户体验。

- 有趣的是,如果列表相当小,图像根本不会闪烁。如果这是语法问题,所有图像都应该闪烁。

- 使用 FlatList 时会出现这种行为吗?即当呈现大量项目时会出现问题吗?如果是这样,我该怎么做才能防止闪烁?

仅供参考,下面是我用于 FlatList 组件的代码。很简单:

     const PostArray = (props) => {
         return (
             (props.postarray===null ?
             null  :
             <FlatList
                 data={props.postarray}
                 style={{marginTop:10}}
                 renderItem={({ item }) =>
                 <ProfilePostsPreview item={item}/>
             }
             keyExtractor={(item, index) => index.toString()}
             />
             )
         )
     }

有什么建议吗?提前致谢!

标签: react-nativereact-native-flatlist

解决方案


推荐阅读