反应本机检测加载图像

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')} 
} 

考虑上面的代码仅仅是一个例子来表达这个想法。

希望这可以为你带来价值。