时间戳

首页 > 解决方案 > 内部的图像反应原生 FlatList 淡入，而不是仅仅被预渲染

react-native - 内部的图像反应原生 FlatList 淡入，而不是仅仅被预渲染

问题描述

我有一个 FlatList 可以渲染一堆图像，但是当我滚动而不是已经渲染时它们会淡入。我认为 FlatList 的 windowSize 属性使得一些东西已经呈现在视口之外。

 <FlatList
          windowSize={8}
          numColumns={columns}
          maxToRenderPerBatch={4}
          data={cardObjects}
          renderItem={itemRender}
          keyExtractor={keyExtractor}
        />

图像组件如下所示：

  <Image
      source={{
        uri: props.uri,
      }}
      style={{width: '100%', aspectRatio: ASPECT_RATIO}}
    />

我希望图像已经被渲染，这样当你向下滚动时它就已经存在了。

目前它的行为如下：https ://www.youtube.com/watch?v=UFFmrAHwAQk

标签： react-nativereact-native-flatlist

解决方案

Flatlist 仅呈现屏幕上的项目。

您可以使用这 2 个道具进行预渲染

initialNumToRender={20}
maxToRenderPerBatch={20}

按照 react-native 官方文档中的react-native-fast-image建议，在列表中渲染图像时再进行一项优化

推荐阅读