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 ...
随机推荐
- Kettle 创建 Transformation
1.第一步,先准备数据和工具 安装好mysql以及客户端工具 数据: USE `test`; CREATE TABLE `account` ( `id` int(11) NOT NULL AUTO ...
- Jupyter增加内核
本例的Jupyter安装在Python3下,以增加Python2内核为例. 首先确认在Python3下已安装了内核: ipython kernel install --user #or python3 ...
- ORA-04091: 表 发生了变化, 触发器/函数不能读它
触发器中新调用了一个存储过程. 触发器: create or replace trigger tr_credits_wzclorder_clwzjk after update on app_wzclo ...
- 8.实现(Realization)
实现关系是用来描述接口和实现接口的类或者构建结构之间的关系,接口是操作的集合,而这些操作就用于规定类或者构建结构的一种服务. 在接口和类之间的实现关系中,类实现了接口,类中的操作实现了接口中所声明的操 ...
- Keil MDK AGDI Drivers, ULink, JLink, ST-Link, NuLink, JTAGjet
AGDI Drivers AGDI is an Application Program Interface (API) third-party developers can use to create ...
- WPF仿360卫士9.0界面设计
Chrome插件——一键保存网页为PDF1.0 http://blog.csdn.net/bdstjk/article/details/9208313 仿照网上的一个代码写的,地址找不到了. 将窗体, ...
- Yeoman+Express+Angular在Linux上开发配置方法
$mkdir ExpressWithAngularTest $cd ExpressWithAngularTest choose needed components you'd like to add ...
- android获取/更改gps和WIFI状态
一.WIFI状态的获取和更改 适用于 SDK1.0 , SDK1.5 1.获取WIFI状态 方法1:通过WifiManager进行操作 1WifiManager wifiManager = (Wifi ...
- ajax开发框架和XMLhttpRequest、responseText、responseXml和JSON的应用
1 AJAX开发框架 2 A 初始化XMLHttpRequest对象 3 B指定响应处理函数 4 C发出HTTP请求 5 D处理服务器返回的信息 6 数据格式提要 6 优点 6 缺点 7 解析 JSO ...
- [AngularJS+ GSAP] Greensock TimelineLite Animation Sequences
TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequen ...