显示加载器，直到实时链接图像未完全加载 React Native 0.58 [英] Show loader until live link image does not load completely React native 0.58

问题描述

我从一个 api 接收到一个 JSON 数组，其中图像有一个实时链接.所以，在我渲染数据成功后，问题是我想在图像完全加载之前显示一个 gif.

I am receiving a JSON array from an api where images have a live link. So, after the success I am rendering the data, problem is I want to show an gif until the images load completely.

数组是:-

[{
    "category": "Loose Flower",
    "id": "7",
    "product_name": "Drb,Tls,Blpt,Nlknt",
    "unit_price": "0",
    "img_path": "http://prabhujionline.com/bo/upload/product_img/[e-mail]",
    "count": 0,
    "is_loaded": true
  },
  {
    "category": "Loose Flower",
    "id": "1",
    "product_name": "Genda",
    "unit_price": "0.5",
    "img_path": "http://prabhujionline.com/bo/upload/product_img/1513947159genda.png",
    "count": 0,
    "is_loaded": true
  }]

<Image
 style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
 source={(this.state.singlepack.is_loaded) ? { uri: 
 this.state.singlepack.img_path } : 
 require('../../../../assets/flower-loader.gif')}
  onLoadStart={(e) => { 
     this.changeImageLoadStatusOnStart(this.props.singleData.id) }}
  onLoadEnd={(e) => 
  this.changeImageLoadStatusOnEnd(this.props.singleData.id) }
 />


changeImageLoadStatusOnStart = (id)=>{
        this.setState({
            singlepack: {
                ...this.state.singlepack,
                is_loaded : false
            }
        })
    }

    changeImageLoadStatusOnEnd = (id) => {
        this.setState({
            singlepack: {
                ...this.state.singlepack,
                is_loaded: true
            }
        })
    }

我已经尝试过 onLoadStart 和 onLoadEnd 但我无法创建逻辑，我可以帮忙吗?

I have tried the onLoadStart and onLoadEnd but I am unable to make the logic, can I have some help?

推荐答案

defaultSorce 和 loadingIndicatorSource 无法正常工作.我找到了解决方案

defaultSorce and loadingIndicatorSource is not working properly. I found a solution

const loaderImage = require('./../assets/img/spinner.png');
var {width} = Dimensions.get('window');

this.state = {
  imageloading: true,
};

_renderItemFood(item) {
    return (
      <TouchableOpacity
        style={styles.divFood}>
        <Image
          style={styles.imageFood}
          resizeMode="contain"
          source={{uri: 'https://api.example.com/images/' + item.image}}
          onLoadEnd={e => this.setState({imageloading: false})}
        />
        {this.state.imageloading && (
          <Image
            style={styles.imageFood}
            resizeMode="contain"
            source={loaderImage}
          />
        )}
        <Text>Some Product name</Text>
      </TouchableOpacity>
    );
  }

  const styles = StyleSheet.create({
    imageFood: {
      width: width / 2.5 - 20 - 10,
      height: width / 2.5 - 20 - 30,
      backgroundColor: 'transparent',
      position: 'absolute',
      top: -45,
    },
    divFood: {
      width: width / 2 - 20,
      padding: 10,
      borderRadius: 10,
      marginTop: 55,
      marginBottom: 5,
      marginLeft: 10,
      alignItems: 'center',
      elevation: 8,
      shadowOpacity: 0.3,
      shadowRadius: 50,
      backgroundColor: 'white',
    },
  });

这篇关于显示加载器，直到实时链接图像未完全加载 React Native 0.58的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！