内部的图像会响应本机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

解决方法

Flatlist仅呈现屏幕上的项目。

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

initialNumToRender={20}
maxToRenderPerBatch={20}

根据react-native-fast-image的建议，渲染列表official docs in react-native中的图像时需要进行另一项优化