onLoadEnd 没有在本机反应中触发答案

【问题标题】：onLoadEnd not firing in react nativeonLoadEnd 没有在本机反应中触发
【发布时间】：2018-05-05 10:23:28
【问题描述】：

我正在尝试在 react native 上显示来自 giphy api 的 GIF。 Gif 需要一些时间才能显示在屏幕上，所以我想在中间显示一个微调器。 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

默认报价列表；

【问题讨论】：

标签： react-native events onload-event

【解决方案1】：

您的组件在状态属性“正在加载”设置为 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>
  );
}

给你的微调器一个绝对位置，以便它在滚动视图上呈现。

【讨论】：

【解决方案2】：

这里看起来不对的一件事是 getGiphy 和 renderQuotes 属性不是箭头函数，也不是在构造函数中绑定“this”。从您的代码来看，您不能使用 setState 函数导致错误的“this”范围。

试试这个看看是否可行

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

您确定没有收到“setState is undefined”之类的错误吗？

【讨论】：