为什么 Flatlist 中的图像有时无法渲染？答案

【问题标题】：Why are images in a Flatlist sometimes not rendering?为什么 Flatlist 中的图像有时无法渲染？
【发布时间】：2019-08-29 23:09:09
【问题描述】：

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

图片来源来自外部网址。

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

https://imgur.com/HmC3Dvr

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

【问题讨论】：

iOS 还是安卓？前段时间在android上出现了一个问题，不知道是否已经修复。一种解决方法是预加载宽度和高度为 0 的图像，因此它们不可见，但可以显示。
这是 iOS，但我还是会调查一下 :)

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

【解决方案1】：

尝试检查图像的分辨率，React Native 通常会遇到大分辨率图像的垃圾收集问题。

【讨论】：

图片只有 150 x 150，所以我认为这不是问题