文档章节

react native Image resizeMode属性

hejunbinlan
 hejunbinlan
发布于 2017/07/10 14:18
字数 330
阅读 25
收藏 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模式基础上支持等比放大。

本文转载自:http://blog.csdn.net/bitian123/article/details/54629347

共有 人打赏支持
hejunbinlan
粉丝 41
博文 586
码字总数 21569
作品 0
浦东
高级程序员
私信 提问
React Native 常用组件之 Image

一、前言 在开发中还有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源。 二、Image组件的基本用法 从当前项目中加...

雷国林
2016/12/15
0
0
【未学习】react native整理笔记

中文文档 http://reactnative.cn/docs/0.30/listview.html#content 一,环境搭建 安装react native命令行 初始化项目 cd luckygoods 初始化过程比较久,耐心等待... 1,IOS 安装Xcode,V7.0+...

雪舞__
2016/12/15
261
0
react-native 之布局篇

宽度单位和像素密度 react的宽度不支持百分比,设置宽度时不需要带单位 , 那么10代表的具体宽度是多少呢? 不知道是官网文档不全还是我眼瞎,反正是没找到,那做一个实验自己找吧: var Di...

Jack088
2016/01/06
429
0
react native 类库(一)

计时器类库 https://github.com/react-native-component/react-native-smart-timer-enhance TabBar底部导航(兼容Android和IOS)--react-native-tab-navigator 下载依赖: npm install react-n......

Chason-洪
2017/09/19
0
0
React Native开发之动画

博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解 另外,我在Github上建立了一个仓库来搜集优秀的React Nativ...

Yomut
2016/06/29
44
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(7.4)HDFS的java客户端API(流处理方式)

博主上一篇博客分享了namenode和datanode的工作原理,本章节将继前面的HDFS的java客户端简单API后深度讲述HDFS流处理API。 场景:博主前面的文章介绍过HDFS上存的大文件会成不同的块存储在不...

em_aaron
昨天
2
0
聊聊storm的window trigger

序 本文主要研究一下storm的window trigger WindowTridentProcessor.prepare storm-core-1.2.2-sources.jar!/org/apache/storm/trident/windowing/WindowTridentProcessor.java public v......

go4it
昨天
6
0
CentOS 生产环境配置

初始配置 对于一般配置来说,不需要安装 epel-release 仓库,本文主要在于希望跟随 RHEL 的配置流程,紧跟红帽公司对于服务器的配置说明。 # yum update 安装 centos-release-scl # yum ins...

clin003
昨天
8
0
GPON网络故障处理手册

导读 为了方便广大网络工作者工作需要,特搜集以下GPON网络处理流程供大家学习参考。开始—初步定为故障—检查光纤状况—检查ONU状态--检查设备运行状态—检查设备数据配置—检查上层设备状态...

问题终结者
昨天
7
0
MariaDB、Apache安装

11月12日任务 11.6 MariaDB安装 11.7/11.8/11.9 Apache安装 1.MariaDB安装 cd /usr/local/src wget https://downloads.mariadb.com/MariaDB/mariadb-10.2.6/bintar-linux-glibc_214-x86_64/......

hhpuppy
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部