微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

内部的图像会响应本机FlatList淡入而不是仅被渲染

如何解决内部的图像会响应本机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中的图像时需要进行另一项优化

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。