如何解决内部的图像会响应本机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 举报,一经查实,本站将立刻删除。