我正在尝试修复我的平面图像列表,有时当我加载屏幕时,所有图像都会加载,有时会随机加载一些图像,但我不知道为什么。关于如何让所有图像始终一致地渲染,有什么建议吗?
图像源来自外部url。
我已经在这个问题上添加了一个gif。它显示了我切换屏幕,以及每次我返回到Flatlist图像网格时得到的不同结果。
我尝试过扁平列表属性removeClippedSubviews={true}和{false}。
renderItem = ({ item, index }) => {
return(
//console.log(item)
<TouchableHighlight onPress={this.props.toggleView.bind(this, index)} >
<View >
<Image source={{uri: item.images.thumbnail.url, cache:'force-cache'}} style={styles.item} resizeMode={"resize"}/>
</View>
</TouchableHighlight>
)
}
render(){
return(
<FlatList
ref={(ref) => { this._flatList = ref; }}
data={this.props.profileMedia}
onScroll={this.handleScroll}
renderItem={this.renderItem.bind(this)}
numColumns={3}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
columnWrapperStyle={{justifyContent: 'flex-start'}}
contentOffset = {{x: 0, y:this.props.scrollPosition}}
keyExtractor={item => item.id}
initialNumToRender={12}
/>
)
}发布于 2019-04-09 10:05:19
尝试检查图像的分辨率,React Native通常会遇到大分辨率图像的垃圾收集问题。
https://stackoverflow.com/questions/55579557
复制相似问题