Блог

Главная - Вопросы по программированию - Как установить цвет фона изображения для изображений (gridview) с помощью react-native-super-grid

Как установить цвет фона изображения для изображений (gridview) с помощью react-native-super-grid

#react-native

#react-native

Вопрос:

Я использую 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> 
  ) 
}

Комментарии:

1. не могли бы вы поделиться своим кодом?

2. <Интервал между изображениями в виде сетки = {5} itemDimension={Ширина сетки} элементы = {this.renderItems()} style={{backgroundColor: ‘white’}} renderItem={this.renderGrid.bind(this)} /> Метод рендеринга сетки renderGrid(){ return( <ImageBackground style = {{backgroundColor:’# D1D1D1′, видимость: 4/5}}> <FastImage ResizeMode={FastImage.ResizeMode.contain} источник={{uri: item.uri}}/> </ImageBackground > ) }

Ответ №1:

Вы можете использовать onLoadEnd prop и изменить состояние, если изображение загружено. Затем вы можете применить стиль непосредственно к FastImage и использовать другой стиль, когда изображение загружено или все еще загружается.

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