React Native学习-measure测量view的宽高值
measure()测量是根据view标签中的ref属性,使用方法如下:
measureWatermarkerImage(){
this.refs.watermarkerImage.measure((a, b, width, height, px, py) =>
this.setState({watermarkerImageWidth: width})
);
}
with:宽;height:高;px:x轴方向距离左边多少像素;py:y轴方向距离上边多少像素;
根据项目需要,如果需要在页面加载完成后进行测量view,就需要使用setTimeout():
componentDidMount() {
setTimeout(this.measureWatermarkerImage.bind(this));
};
React Native学习-measure测量view的宽高值的更多相关文章
- React Native学习(二)之View
React Native组件解析(二)之View 0.JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. ...
- 监听视图树 ViewTreeObserver 获取View的宽高
前奏:在哪里可以获取到View的宽高 我们知道,在onCreate方法执行完毕以后,View才开始被测量,所以我们在onCreate方法里面通过view.getWidth()或view.getMeas ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- React Native 学习资料
React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/
- React Native 学习(三)之 FlexBox 布局
React Native 学习(三)之 FlexBox 布局
- React Native学习(一) 环境搭建
需安装工具 RN环境: [必须] Node [必须] react-native-cli [可选] Node Package Manager(npm):node包管理工具,一般安装Node会带上npm ...
- 在渲染前获取 View 的宽高
在渲染前获取 View 的宽高 这是一个比较有意义的问题,或者说有难度的问题,问题的背景为:有时候我们需要在view渲染前去获取其宽高,典型的情形是,我们想在onCreate.onStart.onRe ...
随机推荐
- redis安装配置与测试
phpredis: https://github.com/nicolasff/phpredis http://www.cnblogs.com/ikodota/archive/2012/03/05/ph ...
- 使用Visual Leak Detector检测内存泄漏[转]
1.初识Visual Leak Detector 灵活自由是C/C++语言的一大特色,而这也为C/C++程序员出了一个难题.当程序越来越复杂时,内存的管理也会变得越加复杂,稍有不慎就会出现内存问题 ...
- oracle 创建同义词
1.语法: 同义词 (SYNONMY) CREATE SYNONYM同义词名FOR 表名; CREATE SYNONYM同义词名FOR 表名@数据库链接名; Create synonym synony ...
- CorelDraw x6【Cdr x6】官方简体中文破解版(64位)安装图文教程、破解注册方法
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 静默安装oracle11G
1.操作系统及Oracle版本 Linux版本:CentOS release 5.5 (Final) Oracle版本:Oracle Database 11g Release 2 (11.2.0.1. ...
- 双网卡绑定-bond0
网卡绑定就是多张网卡逻辑上作为一张网卡用.可分为,负载均衡绑定和冗余绑定两种. 1.编辑虚拟网络接口配置文件 [root@test~]# more /etc/sysconfig/network-scr ...
- js日期计算及快速获取周、月、季度起止日
var now = new Date(); //当前日期 var nowDayOfWeek = (now.getDay() == 0) ? 7 : now.getDay() - 1; //今天是本周的 ...
- 使用.net(C#)发送邮件学习手册(带成功案例)
使用.net(C#)发送邮件学习手册(带成功案例) 1.了解发送邮件的三种方式 2.实例介绍使用client.DeliveryMethod = System.Net.Mail.SmtpDelivery ...
- [ES6] 15. Generators -- 2
Using for..of statement: function* greeting(){ console.log(`Generators are "lazy"`); yield ...
- Javascript加载执行问题探索
转自:http://www.cnblogs.com/huangxincheng/archive/2011/12/04/2275988.html 前言 最近研究MongoDB数据库,无意间发现的好博客, ...