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. 大数据技术之kettle安装使用

    kettle是一款开源的ETL工具,纯java编写,可以在Windows.Linux.Unix上运行,绿色无需安装,数据抽取高效稳定. kettle的两种设计 简述: Transformation(转 ...

  3. Liquibase使用(转)

    文章目录 介绍快速使用Springboot中引入依赖配置日志文件ChangeLog编写变更记录ChangeSetMaven中引入依赖配置liquibase.properties编写变更记录Change ...

  4. django之ajax结合sweetalert使用,分页器和bulk_create批量插入 07

    目录 sweetalert插件 bulk_create 批量插入数据 分页器 简易版本的分页器的推导 自定义分页器的使用(组件) sweetalert插件 有这么一个需求: ​ 当用户进行一个删除数据 ...

  5. 【Android-NetWork】 判断是否连接网络,判断网络连接方式

    如何判断Android是否连接网络? Java代码: ConnectivityManager conn = (ConnectivityManager) getSystemService(Activit ...

  6. 在jquery中,使用ajax上传文件和文本

    function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...

  7. CF1146F Leaf Partition 树形DP

    感觉很多树上难以直接求解的问题都可以转化为动态规划问题并进行求解$.$ 令 $f[x],g[x]$ 分别表示以 $x$ 为根的子树不想上延申,向上延申的方案数$.$ 这里向上延申指的是会有其他子树的节 ...

  8. ASCII和UTF-8

    造冰箱的熊猫@cnblogs 2018/12/11 用了这么久的UTF-8,第一次了解了点UTF-8的细节 UTF-8[1]属于变长度编码.一个UTF-8字符的编码长度为1~4个字节. 1)长度为1个 ...

  9. JQuery事件和动画(7)

    一.事件: 1.鼠标事件 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 dblclick( ) 触发或将函数绑定到指定元素的dblclick事件 双击鼠标时 mouseov ...

  10. Into Blocks (easy version)

    G1 - Into Blocks (easy version) 参考:Codeforces Round #584 - Dasha Code Championship - Elimination Rou ...