反应原生:如何在Android上设置Image defaultSource
问题描述:
反应原生:如何在Android上设置Image defaultSource。反应原生:如何在Android上设置Image defaultSource
我已阅读React native
1.58文件。我发现图片道具defaultSource
仅支持iOS。
当网络图像加载错误时,我需要设置默认图像。
我以前写这样的代码:
{ ImageUrl?
<Image style={styles.docimg}
source={{uri: ImageUrl}}/>
:
<Image style={styles.docimg}
source={require('../../../resource/default.png')}/>
}
现在有一个问题。当URL是字符串类型时,但它不是正确的网络图像。由于网址为true
,图片将不显示任何内容。
我看到图片道具onError
也许解决了我的问题。
我需要设置占位符图像。
答
你只要试试这个,希望它的工作原理...
// initially showDefault will be false
var icon = this.state.showDefault ? require('../../../resource/default.png') : {uri: ImageUrl};
return(
<Image
style={styles.docimg}
source={icon}
onLoadStart={() => this.setState({showDefault: true})}
onLoad={() => this.setState({showDefault: false})}
/>
)
设置showDefault =虚假的onLoad()应该不会触发URL 因为图像是由默认的Android和iOS缓存再次读取。
+0
当'onLoad触发showDefault:false'时,我的图像在默认图像和真实图像之间保持闪烁。任何想法? – vzhen
什么意思是'不正确的网络图像',当网络图像无效时出现什么字符串。举例说明无效的url字符串。 –
@RaviRaj网络图片URL是错误的路径。当网络图片网址错误时,我需要做一些事情,例如,显示占位符图片。 – jiexishede
@RaviRaj答案是有用的,但你只应该操纵状态onError。 onError = {()=> this.setState({showDefault:true})} – Hmm