Показывать загрузчик, пока живая ссылка не загружается полностью React native 0.58 - PullRequest
Новая
       12

Показывать загрузчик, пока живая ссылка не загружается полностью React native 0.58

0 голосов
/ 26 марта 2019

Я получаю массив JSON от API, где изображения имеют живую ссылку.Итак, после успешного рендеринга данных проблема в том, что я хочу показать gif до полной загрузки изображений.

Массив: - 

[{
    "category": "Loose Flower",
    "id": "7",
    "product_name": "Drb,Tls,Blpt,Nlknt",
    "unit_price": "0",
    "img_path": "http://prabhujionline.com/bo/upload/product_img/1513948635octa_pooja_basket_w_handle6_580x@2x.jpg",
    "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, но я не могу понять логику, могу ли я помочь?

1 Ответ

0 голосов
/ 26 марта 2019

Попробуйте это: 

class YourComponent extends React.Component {
  render() {
    return data.map(({ img_path }) => (
      <Image
        style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
        source={{ uri: img_path }}
        loadingIndicatorSource={{
          uri: require('../../../../assets/flower-loader.gif'),
        }}
      />
    ));
  }
}

}

ИЛИ ЭТО 

class YourComponent extends React.Component {
  state = {
    imgsLoaded: data.map(() => false),
  };

  componentDidMount() {
    for (let i = 0; i < data.length; i++) {
      Image.prefetch(data[i].img_path, () => {
        const { imgsLoaded } = this.state;
        const imgsLoadedUpdated = imgsLoaded.slice();
        imgsLoadedUpdated[i] = true;
        this.setState({ imgsLoaded: imgsLoadedUpdated });
      });
    }
  }

  render() {
    const { imgsLoaded } = this.state;

    return data.map(({ img_path }, index) => (
      <Image
        source={{
          uri: imgsLoaded[index]
            ? img_path
            : require('../../../../assets/flower-loader.gif'),
        }}
      />
    ));
  }
}
...