Image组件必须在样式中声明图片的宽和高。如果没有声明,则图片将不会被呈现在界面上。
    我们一般将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高.

当Image的实际宽、高与图片的实际宽、高不符时,视图片样式定义中resizeMode的取值不同而分为三种情况, 三个取值分别是: contain, cover和stretch.默认值是cover.

1. cover模式只求在显示比例不失真的情况下填充整个显示区域。可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了。
            2. contain模式是要求显示整张图片, 可以对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 如果图片宽高都小于控件宽高,则不会对图片进行放大。
            3. stretch模式不考虑保持图片原来的宽,高比.填充整个Image定义的显示区域,这种模式显示的图片可能会畸形和失真。
            4. center模式, 9月11号的0.33版本才支持,contain模式基础上支持等比放大。

原文地址 https://www.jianshu.com/p/62101379fb83

RN 图片处理 resizeMode的更多相关文章

  1. ReactNative开发笔记(持续更新...)

    本文均为RN开发过程中遇到的问题.坑点的分析及解决方案,各问题点之间无关联,希望能帮助读者少走弯路,持续更新中... (2019年3月29日更新) 原文链接:http://www.kovli.com/ ...

  2. ReactNative布局样式总结

    flex number 用于设置或检索弹性盒模型对象的子元素如何分配空间 flexDirection enum('row', 'row-reverse' ,'column','column-rever ...

  3. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  4. RN中的常用组件-----图片

    1.RN中的常用组件-----图片 本地图片: <Image  source={require('../src/assets/x.jpg')}/> 本地图片可以无需指定尺寸(因为导入/打包 ...

  5. [RN] React Native 图片保存到相册(支持 Android 和 ios)

    React Native 图片保存到相册(支持 Android 和 ios) 原理: IOS用 RN自带的 CameraRoll, Android 使用 不成功,需要 react-native-fs  ...

  6. [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题

    React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...

  7. [RN] React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁

    React Native 使用开源库 react-native-image-crop-picker 实现图片选择.图片剪裁 该库可以实现启动本地相册和照相机来采集图片,并且提供多选.图片裁剪等功能,支 ...

  8. [RN] React Native 图片懒加载库 animated-lazy-image

    React Native 图片懒加载库 animated-lazy-image 官方Github地址: https://github.com/danijelgrabez/lazy-image 使用效果 ...

  9. Image图片自适应 Image resizeMode属性

    cover比较安全 cover模式只求在显示比例不失真的情况下填充整个显示区域.可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了.contain模式是要求显示整 ...

随机推荐

  1. python+Appium自动化:各种元素定位方法

    name定位 driver.find_element_by_name('飞利浦净水').click() 测试结果报错:selenium.common.exceptions.InvalidSelecto ...

  2. Alpha个人项目测试

    这个作业属于哪个课程 [课程链接][ ] 这个作业要求在哪里 [作业要求][ ] 团队名称 [山海皆可平][ ] 作业目标 对其他小组进行测试 测试报告 姓名 唐友鑫 学号 201631062121 ...

  3. springcloud实践(三)之断路器:Hystrix

    服务雪崩效应 基础服务的故障导致级联故障,进而造成了整个分布式系统的不可用,这种现象被称为服务雪崩效应.服务雪崩效应描述的是一种因服务提供者的不可用导致服务消费者的不可用,并将不可用逐渐放大的过程. ...

  4. Java-DealString工具类

    import java.text.NumberFormat; import java.util.Date; import java.util.Locale; import java.util.Stri ...

  5. Vue上传通过“服务端签名后直传”上传文件到阿里云 报错 400 Bad Request

    我报错的原因是 formData.append('file', file) 放在签名前面了 解决办法 formData.append('file', file) 一定在最后 /** * 上传文件到 o ...

  6. VUE路由过度效果vs缓存

    app页面 router.js

  7. Python 爬虫十六式 - 第六式:JQuery的假兄弟-pyquery

    PyQuery:一个类似jquery的python库 学习一时爽,一直学习一直爽   Hello,大家好,我是 Connor,一个从无到有的技术小白.上一次我们说到了 BeautifulSoup 美味 ...

  8. 51 Nod 1035 最长的循环节 (此题还不是很懂,日后再看)

    转自: https://blog.csdn.net/define_danmu_primer/article/details/52456763 51nod 1035 最长的循环节(无限小数的循环节) 2 ...

  9. Neko does Maths CodeForces - 1152C 数论欧几里得

    Neko does MathsCodeForces - 1152C 题目大意:给两个正整数a,b,找到一个非负整数k使得,a+k和b+k的最小公倍数最小,如果有多个k使得最小公倍数最小的话,输出最小的 ...

  10. TensorFlow使用记录 (七): BN 层及 Dropout 层的使用

    参考:tensorflow中的batch_norm以及tf.control_dependencies和tf.GraphKeys.UPDATE_OPS的探究 1. Batch Normalization ...