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. spring源码学习之bean的加载(二)

    这是接着上篇继续写bean的加载过程,好像是有点太多了,因为bean的加载过程是很复杂的,要处理的情况有很多,继续... 7.创建bean 常规的bean的创建时通过doCreateBean方法来实现 ...

  2. light7结合jquery实现开关按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. jQuery事件绑定的四种方法

    jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...

  4. 这些Excel学会了,你做账的效率将大大提高

    这些Excel学会了,你做账的效率将大大提高 这些功能学会了,工作效率将大大提高. 1.excel的快速访问工具栏: 我的快速访问工具栏由左到右主要是"保存"."新建&q ...

  5. netbeans生成的maven工程没有web.xml文件 如何新建

    使用netbeans生成的maven工程没有web.xml 需要自己新建 步骤: 下一步,完成

  6. makefile 语法笔记 3

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

  7. 验证python中函数传参是引用传递

    定义: 值传递(pass by value)是指在调用函数时将实际参数复制一份传递到函数中,这样在函数中如果对参数进行修改,将不会影响到实际参数. 引用传递(pass by reference)是指在 ...

  8. JavaScript基本的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Pycharm安装package报错:AttributeError: module 'pip' has no attribute 'main'

    Pycharm安装package报错:AttributeError: module 'pip' has no attribute 'main' 确认pip已经升级到目前最新版本了. 在网上搜寻后,解决 ...

  10. linux 查看磁盘空间占用情况

    工作中有时被分配的测试机空间不大,经常遇到磁盘空间占满的情况.排查过程如下: 一.首先使用df -h 命令查看磁盘剩余空间,通过以下图看出/目录下的磁盘空间已经被占满. 二.进入根目录,因为最近常用的 ...