Как я могу поставить GIF при загрузке изображения из URI в реагировать родной - PullRequest
Новая
       33

Как я могу поставить GIF при загрузке изображения из URI в реагировать родной

1 голос
/ 10 апреля 2020

У меня есть FlatList, который содержит Image, это FlatListItem. Изображение загружается с uri. Вот FlatListItem: 

 <View style={styles.autoListView}>
   <Image style={styles.imageOfItem} source={{uri: this.props.item.PICTURE}}/>
   <Image style={styles.isNewImage} source={require("../assets/sticker_new.png")}  />
   <Image style={styles.stockImage} source={require("../assets/sticker_stock.png")}  />
   {this.renderItemBottom()}
  </View>

Когда вес изображения больше, оно загружается медленно. Он загружается через несколько секунд:

FlatList

У меня loading gif. Я хочу показать этот рисунок, пока изображение не загрузится с uri. Как я могу это сделать?

1 Ответ

1 голос
/ 10 апреля 2020

Для прогресса мы используем реагировать-родной-прогресс . Мы использовали реагировать-родной-быстрый-образ вместо изображения 

<View style={imageStyle}>
  <Image
    style={imageStyle}
    source={displayImage}
    resizeMode={resizeMode}
    onProgress={progress => this.setState({ progressState: Math.abs(progress.nativeEvent.loaded / progress.nativeEvent.total) })}
    onLoadStart={() => { this.setState({ isLoading: true }) }}
    onError={() => this.setState({ displayImage: this.state.placeHolderImage })}
    onLoadEnd={() => this.setState({ isLoading: false })}
  />
  {this.state.isLoading && <Progress.CircleSnail
    style={[styles.progressBar, (this.props.progressBarStyle || {})]}
    progress={this.state.progressState}
    color={this.props.progressIndicatorColor || this.state.progressIndicatorColor}
    direction='clockwise'
    progressBarSize={this.props.progressBarSize || this.state.progressBarSize}
  />}
</View>
...