Question

我有问题。我在Image中使用onLoad，onLoadStart和onLoadEnd。我想等待服务器获取响应链接图像并显示图像，添加加载。但它不断地抽搐。

  constructor (props) {
    super(props)
    this.state = {loading: true}}

    return(
     <Image
        onLoad={(e) => this.setState({loading: true})}
        onError={(e) => this.setState({loading: false})}
        onLoadStart={(e) => this.setState({loading: false})}

        source={this.state.loading ? require('../../img/loading.gif') : { 
         uri: getBestUrl(artwork)}}
        style={styles.artworkImage}
        resizeMode={Image.resizeMode.cover}
      />)

Answer 1

您是从构造函数中返回图像还是未发布所有代码？

现在回答这个问题，我认为它不会以这种方式工作，因为它似乎总是会改变状态，同时加载你的“loading.gif”＃39;或你的uri形象。您还要为图像设置高度和重量吗？正如您在文档中所看到的那样，这是必需的

与静态资源不同，您需要手动指定图像的尺寸。

https://facebook.github.io/react-native/docs/images.html#network-images

也许您可以将图像路径存储在您的状态中，并根据状态值进行条件渲染。例如：

...
this.state = {
imagePath: null,
}
...

this.setState({
imagePath: getBestUrl(artwork);
});
...

{
this.state.imagePath ? <Image uri={require(this.state.imagePath)} /> : <Image uri={require('loading.gif')}
}

考虑上面的代码只是作为表达想法的一个例子。

希望这对你来说是值得的。

反应原生检测加载图像

1 个答案: