React Native之Image组件使用时Android和iOS兼容性

在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
}



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值