反应本机检测加载图像
问题描述:
我有一个问题。我在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}
/>)
答
你是从构造函数返回一个图像还是你没有发布所有的代码?
现在的问题,我认为它不会这样工作,因为它似乎总是会改变状态,而加载您的'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')}
}
考虑上面的代码仅仅是一个例子来表达这个想法。
希望这可以为你带来价值。
感谢您的想法。我只是添加了我的代码。你可以看看。我没有做过一个例子 –