onLoadEnd не стреляет в реагировать родной - PullRequest
Новая
       40

onLoadEnd не стреляет в реагировать родной

0 голосов
/ 05 мая 2018

Я пытаюсь отобразить GIF из giphy api на реагировать родной. Gifs требуют времени для отображения на экране, поэтому я хочу отображать счетчик в середине. Кажется, что событие onLoadEnd никогда не запускается для тега Image, поэтому спиннер работает бесконечно, потому что я никогда не могу обновить загрузку в своем состоянии. Что я тут не так делаю? 

import React, { Component } from 'react';
import { View, Text, ScrollView, Image} from 'react-native';
import axios from 'axios';
import QuoteDetail from './quote_detail'
import Spinner from './spinner'

// class based component knows when it's gona be rendered
class QuoteList extends Component {
  state = { quotes: [],
            giphyUrl: 'https://media.giphy.com/media/nZQIwSpCXFweQ/giphy.gif',
            loading: true
          };

  componentWillMount() {
    console.log('Again?')
    axios.get('https://api.tronalddump.io/search/quote?query='+this.props.characterName)
      .then(response => this.setState({ quotes: response.data._embedded.quotes }))
    this.getGiphy()
  }

  getGiphy() {
    console.log('getgif')
    const GiphyUrl = "https://api.giphy.com/v1/gifs/search?api_key=mBJvMPan15t7TeLs8qpyEZ7Glr5DUmgP&limit=1&q=" + this.props.characterName.replace(" ", "+");
    console.log(GiphyUrl)
    axios.get(GiphyUrl)
      .then(response => {
                  console.log(response)
                  console.log(response.data.data[0].url)

                  this.setState({ giphyUrl: response.data.data[0].images.original.url})
                  console.log(this.state)
                })

  }

  renderQuotes() {
    return this.state.quotes.map(
      quote => <QuoteDetail key={quote.quote_id} quote={quote}/>
    );
  }



  render() {
    if (this.state.loading) {
      return < Spinner />;
    }
    else {
      return (
        <ScrollView>
          <View style={styles.viewStyle}>
            <Image
              source={{uri: this.state.giphyUrl}}
              key={this.state.giphyUrl}
              style={styles.gifStyle}
              onLoadEnd={() => console.log('im done loading')}
            />
            <Text style={styles.vsStyle}>VS</Text>
            <Image
              source={{ uri: "https://media.giphy.com/media/xTiTnHXbRoaZ1B1Mo8/giphy.gif"}}
              key="https://media.giphy.com/media/xTiTnHXbRoaZ1B1Mo8/giphy.gif"
              style={styles.gifStyle}
            />
          </View>
          {this.renderQuotes()}
        </ScrollView>
      );
    }
  }
}

const styles = {
  gifStyle: {
    height: 200,
    width: 190
  },
  viewStyle: {
    flexDirection: 'row'
  },
  vsStyle: {
    marginTop: 95,
    marginLeft: 5,
    marginRight: 5,
    fontWeight: 'bold',
    fontSize: 20
  }
};

export

по умолчанию QuoteList;

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

Ваш компонент монтируется с государственным свойством 'loading', установленным в значение true. В вашем методе рендеринга вы условно визуализируете свой спиннер, или ваше изображение, содержащее скроллвью, основываясь на том, истинно ли «загрузка», и я не вижу места в вашем примере кода, где «загрузка» когда-либо установлена ​​на ложный. Это означает, что ваш <Image /> никогда не отображается, поэтому он никогда не загружается, поэтому onLoadEnd никогда не будет вызываться.

Я бы по-прежнему только условно отображал спиннер, но подходил бы к нему примерно так: 

render() {
  return (
    <View>
      <ScrollView>
        <View style={styles.viewStyle}>
          <Image
            source={{uri: this.state.giphyUrl}}
            key={this.state.giphyUrl}
            style={styles.gifStyle}
            onLoadEnd={() => this.setState({loading: false})}
          />
          <Text style={styles.vsStyle}>VS</Text>
          <Image
            source={{uri:"https://media.giphy.com/media/xTiTnHXbRoaZ1B1Mo8/giphy.gif"}}
        key="https://media.giphy.com/media/xTiTnHXbRoaZ1B1Mo8/giphy.gif"
            style={styles.gifStyle}
          />
        </View>
        {this.renderQuotes()}
      </ScrollView>
      {this.state.loading && <Spinner />}
    </View>
  );
}

Дайте вашему вращателю абсолютную позицию, чтобы он отображался поверх прокрутки.

0 голосов
/ 13 мая 2018

Одна вещь, которая кажется здесь неправильной, это свойства getGiphy и renderQuotes, которые не являются функциями стрелок или не связывают «this» в конструкторе. Судя по вашему коду, вы не можете использовать функцию setState из-за неправильной «this» области видимости.

Попробуйте, чтобы увидеть, работает ли это 

getGiphy = () => {...}
renderQuotes = () => {...}

Вы уверены, что не получите сообщение об ошибке "setState is undefined"?

...