ios - 为什么 Flatlist 中的图像有时无法渲染?

标签 ios image react-native rendering react-native-flatlist

我正在尝试修复我的图像平面列表,有时当我加载屏幕时会加载所有图像,有时会加载随机数量的图像,我不知道为什么。关于如何让所有图像始终一致呈现的任何建议?

图片来源来自外部网址。

我在这个问题上添加了一个 gif。它向我展示了切换屏幕,以及每次返回 Flatlist 图像网格时得到的不同结果。

https://imgur.com/HmC3Dvr

我已经尝试了 flatlist prop 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}
      />
  )
 }

最佳答案

尝试检查图像的分辨率,React Native 通常会在大分辨率图像垃圾回收方面出现问题。

关于ios - 为什么 Flatlist 中的图像有时无法渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55579557/

相关文章:

react-native - 使用 axios 使用 Rest api

android - react native android genymotion错误java.util.concurrent.ExecutionException :

ios - 如何使用 Swift 4 将字典对象插入 Firebase 数据库

ios - 动画 MKOverlayView

javascript - React - 如何重定向到搜索上的另一个组件?

Java GUI : Image will be overwritten, 路径相同 -> 在框架中显示它(图像仍然相同)

html - 如何透明去除图像阴影

iphone - 如何从 iPhone 的图库中删除选定的照片?

ios - 非视网膜 iPad 上的图像看起来模糊

javascript - 将图像叠加在图像之上