react native Image resizeMode属性
react native Image resizeMode属性
hejunbinlan 发表于10个月前
react native Image resizeMode属性
  • 发表于 10个月前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

resizeMode

Image组件必须在样式中声明图片的宽和高。如果没有声明,则图片将不会被呈现在界面上。
我们一般将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高.当Image的实际宽、高与图片的实际宽、高不符时,视图片样式定义中resizeMode的取值不同而分为三种情况, 三个取值分别是: contain, cover和stretch.默认值是cover.

  1. cover模式只求在显示比例不失真的情况下填充整个显示区域。可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了。
  2. contain模式是要求显示整张图片, 可以对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 如果图片宽高都小于控件宽高,则不会对图片进行放大。
  3. stretch模式不考虑保持图片原来的宽,高比.填充整个Image定义的显示区域,这种模式显示的图片可能会畸形和失真。
  4. center模式, 9月11号的0.33版本才支持,contain模式基础上支持等比放大。
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 40
博文 529
码字总数 21018
×
hejunbinlan
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: