如何使用react-native-super-grid为图像（gridview）设置图像背景颜色

Question

我正在使用react-native-super-grid显示网格图像。在将图像加载到网格之前，我需要为每个图像设置背景色。

这是我的代码：

<GridView 
  spacing={5} 
  itemDimension={gridWidth} 
  items={this.renderItems()} 
  style={{backgroundColor: 'white'}} 
  renderItem={this.renderGrid.bind(this)} 
/> 

// Render grid method 
renderGrid() { 
  return(
    <ImageBackground 
      style={{backgroundColor:'#D1D1D1', aspectRatio:4/5}}
    >
      <FastImage 
        resizeMode={FastImage.resizeMode.contain} 
        source={{uri: item.uri}}
      /> 
    </ImageBackground> 
  ) 
}

Answer 1

您可以使用 onLoadEnd 道具，并在加载图像后更改状态。然后，您可以将样式直接应用于 FastImage ，并在加载或仍然加载图像时使用其他样式。

renderGrid() { 
  return(
    <ImageBackground>
      <FastImage 
        resizeMode={FastImage.resizeMode.contain} 
        source={{uri: item.uri}}
        style={imageLoaded ? styleWithoutBg : styleWithBg}
        onLoadEnd={() => this.setState({ imageLoaded: true })}
      /> 
    </ImageBackground> 
  ) 
}