我如何在反应本机中从 uri 加载图像时放置 gif

Question

我有 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>

图片权重越大加载越慢。几秒钟后加载：

我有loading gif。我想显示此 gif 直到图像从 uri 加载。我该怎么做？

Answer 1

为了取得进步，我们使用 react-native-progress. We have used react-native-fast-image 而不是图片

<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>

我如何在反应本机中从 uri 加载图像时放置 gif

How can I put gif while Image loading from uri in react native

image

react-native

react-native-flatlist