在React Native中Image组件有两种写法:
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
<Image source={require('./img/check.png')} />
如果你的代码中需要使用ajax网络请求出img的url地址,就需要使用uri的方法来写
<Image source={{uri: this.props.configData.imgUrlPath}} style={styles.configDataImage} />
注:以上代码中使用了uri,而且style中写明了图片的宽高。
而对于这个图片地址请求不到的情况,Android和iOS处理的方式是不一样的:
Android:直接不显示不占位,但是ios会占位
iOS:不显示但是会占位
对此,我的兼容性处理办法如下:
在Image组件写出来之前保证在uri地址有效的情况下,才开始加载Image组件,否则不加载。
<View style={styles.headRight}>
{
isConfigData && this.props.configData.imgUrlPath ? <Image source={{uri: this.props.configData.imgUrlPath}} style={styles.configDataImage} /> : <View style={styles.configDataImage}></View>
}
<Text style={styles.headRightText}>注册</Text>
</View>
configDataImage: {
width: 22,
height: 22,
marginRight: 5
}