反应原生检测加载图像

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”或您的 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')}
}

将上面的代码视为表达想法的示例。

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