文档章节

react native Image resizeMode属性

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

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

共有 人打赏支持
hejunbinlan
粉丝 40
博文 578
码字总数 21362
作品 0
浦东
高级程序员
React Native 常用组件之 Image

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

雷国林
2016/12/15
0
0
【React Native开发】React Native控件之Image组件讲解与美团首页顶部效果实例(10)

转载请标明出处: http://blog.csdn.net/developerjiangqq/article/details/50557632 本文出自:【江清清的博客】 (一)前言 【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会...

jiangqq781931404
2016/01/21
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开发之动画

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

Yomut
2016/06/29
44
0
react native 类库(二)

一.react native动画react-native-animatable) https://github.com/oblador/react-native-animatable //GitHub地址 二.高德地图(react-native-amap3d) https://github.com/qiuxiang/react-n......

Chason-洪
2017/10/27
0
0
React Native 简介:用 JavaScript 搭建 iOS 应用(2)

【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中,作者介绍通过 React Native 框架构建一个...

OneAPM蓝海讯通
2015/08/12
108
0
React Native 项目常用第三方组件汇总

http://www.jianshu.com/p/18fd4b438958 https://www.jianshu.com/p/bb5f68a236d3 React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-......

Chason-洪
2017/10/22
0
0
react-native项目集成到现有原生项目

使用cocoapods集成react-native到现有原生项目 一、可参考react-native官网:http://reactnative.cn/docs/0.49/integration-with-existing-apps.html#content 二、集成步骤: 设置项目目录结...

Peter_Zhang
06/12
0
0
如何用 React Native 创建一个iOS APP?(三)

前两部分,《如何用 React Native 创建一个iOS APP?》,《如何用 React Native 创建一个iOS APP (二)?》中,我们分别讲了用 React Native 来创建 Navigation Bar,Tab Bar 等这些控件,今...

OneAPM蓝海讯通
2016/01/18
57
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计模式-工厂模式

工厂模式 解释 根据参数返回对应的实例使用该实例进行操作 BeanFactory Object obj = BeanFactory.getBean(String name);getBean方法中根据name参数进行处理在程序外部使用obj实例增加n...

郭里奥
6分钟前
0
0
python使用有序字典

python自带的collections包中有很多有用的数据结构可供使用,其中有个叫OrderedDict类,它可以在使用的时候记录元素插入顺序,在遍历使用的时候就可以按照原顺序遍历。 a = {"a":1,"b"...

芝麻糖人
31分钟前
0
0
RestTemplate HttpMessageConverter

RestTemplate 微信接口 text/plain HttpMessageConverter

微小宝
32分钟前
0
0
mysql视图/存储过程/函数/事件/触发器

--语法参考:https://dev.mysql.com/doc/ (当前用的是5.6) https://dev.mysql.com/doc/refman/5.6/en/sql-syntax-data-manipulation.html --视图 CREATE VIEW test.v AS SELECT * FROM t;......

坦途abc
33分钟前
0
0
MySQL参数优化案例

环境介绍 硬件配置 cpu核心数 内存大小 磁盘空间 16核 256G 3T 软件环境 操作系统版本 mysql版本 表数目 单表行数 centos-7.4 mysql-5.7.22 128张表 2kw行 优化层级与指导思想 优化层级 MySQ...

小致dad
43分钟前
0
0
【HAVENT原创】NodeJS 短网址开发(调用第三方接口)

最近想弄个短网址的示例站点,在网上搜集了一些代码,都需要数据库支持,所以只能自己写个简单的不需要数据库支持的(PS:那就只能借调第三方的接口了)。 index.js 启动文件 'use strict';...

HAVENT
43分钟前
0
0
219. Contains Duplicate II - LeetCode

Question 219. Contains Duplicate II Solution 题目大意:数组中两个相同元素的坐标之差小于给定的k,返回true,否则返回false 思路:用一个map记录每个数的坐标,如果数相同,如果坐标差小...

yysue
52分钟前
0
0
Android 自动生成java bean

背景: 想搞一个自动生成java bean 的方案。 首先想到的是注解自动生成代码的方法。但是看了看注解相关的东西,发现对已有的类,增加方法,目前没有找到办法。 继续goole :发现了这里。 ht...

Carlyle_Lee
56分钟前
0
0
图片加载相关

本文记载有关于 图片懒加载、图片模糊加载等与图片加载相关的知识,后续会更新 图片懒加载 利用img标签src属性,在该图片快到达客户可视范围时,给img添加src属性(添加后,会发起请求下载图...

littleFaye
57分钟前
0
0
面试宝典-怎么实现分布式锁

1. 基于数据库表做乐观锁,用于分布式锁。 2. 使用memcached的add()方法,用于分布式锁。 3. 使用redis的setnx()、expire()方法,用于分布式锁。 设置过期时间防止死锁,但是如果在setnx和e...

suyain
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部