RN 图片处理 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模式基础上支持等比放大。

原文地址 https://www.jianshu.com/p/62101379fb83
RN 图片处理 resizeMode的更多相关文章
- ReactNative开发笔记(持续更新...)
本文均为RN开发过程中遇到的问题.坑点的分析及解决方案,各问题点之间无关联,希望能帮助读者少走弯路,持续更新中... (2019年3月29日更新) 原文链接:http://www.kovli.com/ ...
- ReactNative布局样式总结
flex number 用于设置或检索弹性盒模型对象的子元素如何分配空间 flexDirection enum('row', 'row-reverse' ,'column','column-rever ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- RN中的常用组件-----图片
1.RN中的常用组件-----图片 本地图片: <Image source={require('../src/assets/x.jpg')}/> 本地图片可以无需指定尺寸(因为导入/打包 ...
- [RN] React Native 图片保存到相册(支持 Android 和 ios)
React Native 图片保存到相册(支持 Android 和 ios) 原理: IOS用 RN自带的 CameraRoll, Android 使用 不成功,需要 react-native-fs ...
- [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题
React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...
- [RN] React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁
React Native 使用开源库 react-native-image-crop-picker 实现图片选择.图片剪裁 该库可以实现启动本地相册和照相机来采集图片,并且提供多选.图片裁剪等功能,支 ...
- [RN] React Native 图片懒加载库 animated-lazy-image
React Native 图片懒加载库 animated-lazy-image 官方Github地址: https://github.com/danijelgrabez/lazy-image 使用效果 ...
- Image图片自适应 Image resizeMode属性
cover比较安全 cover模式只求在显示比例不失真的情况下填充整个显示区域.可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了.contain模式是要求显示整 ...
随机推荐
- canvas制作圆形动态加载进度实例
window.onload=function(){ var loading=document.getElementById('loading'); var context=loading.getCon ...
- Mybatis 解决问题的记录与博客
问题:mybatis 空值映射的问题Mybatis在使用resultMap来映射查询结果中的列,如果查询结果中包含空值的列(不是null),则Mybatis在映射的时候,不会映射这个字段 https: ...
- TXNLP 20-33
文本处理的流程 # encoding=utf-8 import jieba import warnings # 基于jieba的分词 seg_list = jieba.cut("贪心学院专注 ...
- k8s知识1
kubernetes到底有多难?看下面的白话: service 网络通信原理service 由k8s外面的服务作为访问端 内部里面其实是pod————————————————————————————— ...
- poj 3190 贪心+优先队列优化
Stall Reservations Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4274 Accepted: 153 ...
- BZOJ 2651 城市改建 树形DP+模拟?
题意 给一颗树,删除一条边再加一条边,使它仍为一颗树且任意两点间的距离的最大值最小. 题目数据范围描述有问题,n为1或重建不能使任意两点距离最大值变小,可以输出任意答案. 分析 删除一条边后会使它变成 ...
- rename、remove
/*** remove.c ***/ #include<stdio.h> int main() { remove("./b.txt"); } 运行结果: ubuntu1 ...
- Cortex-M3 入门指南(三):时钟总线与复位时钟控制器
[reset clock control 复位和时钟控制器] 时钟信号对于处理器非常重要,比如我们熟悉的 CPU 就是由时钟信号驱动的,而主频就是内核的的时钟信号频率.Cortex-M3 有着复杂的 ...
- Paint the Digits
C - Paint the Digits 思路:这道题就只需要利用单调栈,将整个数组扫一遍,求得的最后的栈内元素(要求全部小于非栈内元素)的颜色为1,其余为2 那么怎么实现呢?求最后的栈内元素(要求全 ...
- 记一次protobuf和hbase自带protobuf版本冲突的解决
使用protobuf生产模板代码,使用的版本是: <dependency> <groupId>com.google.protobuf</groupId> <a ...