9月11号 0.33版本,resizeMode中添加了center, 可以实现一样的功能。不过希望这篇文章还能帮助大家。

之前我们学习了从零学React Native之08Image组件

大家可以发现, 原生的Image控件无法实现等比放大后无丢失显示。

如: 有一张20x10的图片, 要放入一个40x30的显示区域内.

1. cover模式(默认),图片放大为60x30, 然后切成40x30, 会丢失部分显示的图片。

2. contain 模式, 图片分辨率为20x10, 四周都有空白。

3. stretch模式, 图片放大为40x30, 丢失原始的宽、高比。

但我们无法做到将图片放大为40*20, 然后再显示。接下来我们自定义组件ImageEquallyEnlarge:

import React, { Component } from 'react';
import {
Image
} from 'react-native'; export default class ImageEquallyEnlarge extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
//状态机变量是一个style, 它将被用于定义显示图片的样式
style: {}
};
this.onImageLayout=this.onImageLayout.bind(this);
}
//此函数被挂接到组件的onLayout事件上, 当组件布局更新时, 此函数被调用
//此函数中计算新的宽度与高度并将其保存在组件的状态机变量中
//event 对应的值为 : {nativeEvent: {layout: {x, y, width, height}}}
onImageLayout(event) {
let layout=event.nativeEvent.layout;//获取layout
//按照如果布局比图片小, 图片不会放大,不处理
if(layout.width<=this.props.originalWidth) return;
if(layout.height<=this.props.originalHeight) return;
// 图片宽高比
let originalAspectRatio=this.props.originalWidth/this.props.originalHeight;
let currentAspectRatio=layout.width/layout.height;
// 如果比例一样 不处理, 图片会自动放大
if(originalAspectRatio===currentAspectRatio) return;
if(originalAspectRatio>currentAspectRatio){// 图片原宽度相对高略宽
let newHeight=layout.width/originalAspectRatio; //减少控件高度
this.setState({
style:{
height:newHeight
}
});
return ;
}
//图片原宽度相对高略窄 减少控件宽度
let newWidth=layout.height*originalAspectRatio;
this.setState({
style:{
width:newWidth
}
});
}
// {...this.props} 是JSX语法, 意思是将ImageEquallyEnlarge组件收到的props透传给Image组件
render(){
return(
<Image {...this.props}
style={[this.props.style,this.state.style]}
onLayout={this.onImageLayout}
/>
)
}
}
//控件属性
// 声明必须要有的图片原始宽度与高度
ImageEquallyEnlarge.prototype = {
originalWidth: React.PropTypes.number.isRequired,
originalHeight: React.PropTypes.number.isRequired
};

上面代码,没什么特殊的技巧, 我们都知道在组件开始布局或者布局改变的时候 就会调用组件的onLayout方法, 我们在onLayout方法中, 获取到了Image组件的实际宽高, 然后再根据传递过来图片真实的宽高计算下组件合适的宽高, 再通过状态机修改组件的宽高。

测试一下,修改index.android.js或者index.ios.js:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Image
} from 'react-native';
//导入自定义组件
import ImageEquallyEnlarge from './ImageEquallyEnlarge';
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<ImageEquallyEnlarge
style={styles.imageStyle}
source={require('./image/big_star.png')}
originalHeight={70}
originalWidth={100}
/>
<ImageEquallyEnlarge
style={styles.image2Style}
source={require('./image/big_star.png')}
originalHeight={70}
originalWidth={100}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'blue'
},
imageStyle: {
width: 240,
height: 360,
backgroundColor: 'red'
},
image2Style: {
width: 300,
height: 460,
backgroundColor: 'red'
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

运行结果:

图片原图:



根据背景颜色就可以看到 图片实现了等比放大不丢失。

更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。

React Native等比放大不丢失图片的更多相关文章

  1. [RN] React Native 下拉放大动画

    React Native 下拉放大动画 经测试,无法运行 https://www.jianshu.com/p/1c960ad75020

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

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

  3. 从零学React Native之08Image组件

    开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...

  4. react native 之上传文件

    最近遇到react native中需要上传一些图片到后台.期间,找了一些第三方上传插件,感觉不太好用,要么只支持一个平台,要么会对其他第三方造成影响,实在无奈.只能直接使用fetch上传.其中上传文件 ...

  5. react native android 上传文件,Nodejs服务端获取上传的文件

    React Native端 使用react-native-image-picker 做出选择图片的操作,选择完成后,直接将图片Post至服务器,保存在服务器的某个地方(保存图片的路径需要公开显示),并 ...

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

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

  7. 【React Native 实战】旋转图片验证码

    1.前言蘑菇街用打乱方向的图片作为验证码,既起到了验证码的作用又宣传了图片,今天我们就用React Native来实现这样的功能. 2.属性 Image标签属性resizeMode enum('cov ...

  8. React Native之图片保存到本地相册(ios android)

    React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...

  9. React native 之android的图标和启动图片

    哎哎呀呀,上篇说到了react native的IOS的图标和启动图片的设置,其实最主要的是尺寸!相应的尺寸设定好了以后就不会报错了! ok~这篇说的是React native的android的图标和启 ...

随机推荐

  1. uwsgi: invalid option -- 'x'

    安装:pip install uwsgi 启动:uwsgi -x 'uwsgi.xml'报错:uwsgi: invalid option -- 'x' 原因:centos下,在没有安装libxml2时 ...

  2. 如约而至(walk)

    LCA大佬的做法: 考虑暴力的高斯消元,我们优化它. $\sum\limits_{j} gcd(i,j)^{c-d} i^d j^d x_j=b_i$ $\sum\limits_{j} gcd(i,j ...

  3. Linux 拷贝有更改的文件

    cp -Ruv /home/username/trunk_new/app/* /data/httpdocs/wwwroot/app/

  4. 异步 I/O 和事件驱动

    异步IO(asynchronous I/O) 首先来理解几个容易混淆的概念,阻塞IO(blocking I/O)和非阻塞IO(non-blocking I/O),同步IO(synchronous I/ ...

  5. 20190716-T1-礼物

    呵呵,我暴力WA了 这个题充分考验了大家对数学的理解(麦蒙大多在胡诌) 但是确实如此啊. 看数据范围想状压.(我额嗯嗯想到暴力?) 然后设出一个可爱的$dp$式(主语当然不是我,是出题人大佬) $f_ ...

  6. Sessions 与Cookies详解

     一.Cookie 是什么? HTTP协议是无状态的,每一次数据交换完毕就结束,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接.例如:我逛淘宝买东西,我看上了易宝棒棒糖,而我下单的时候 ...

  7. 【python自动化学习笔记】

    [python自动化第一篇:python介绍与入门] [python自动化第二篇:python入门] [python自动化第三篇:python入门进阶]      [Python自动化第三篇(2):文 ...

  8. makefile 语法笔记 3

    这里说明了 在一些情况下 这也是可以使用通配符的 objects =*.o 这种情况是不会展开的 makefile 中的变量是C++/C 中的宏 如果希望展开,可以使用 $(wildcard *.o) ...

  9. 洛谷P1311 [NOIP2011提高组Day1T2]选择客栈

    P1311 选择客栈 题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一 ...

  10. 洛谷P2859 [USACO06FEB]摊位预订Stall Reservations

    P2859 [USACO06FEB]摊位预订Stall Reservations 题目描述 Oh those picky N (1 <= N <= 50,000) cows! They a ...