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的宽高值的更多相关文章

  1. React Native学习(二)之View

    React Native组件解析(二)之View 0.JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. ...

  2. 监听视图树 ViewTreeObserver 获取View的宽高

    前奏:在哪里可以获取到View的宽高 我们知道,在onCreate方法执行完毕以后,View才开始被测量,所以我们在onCreate方法里面通过view.getWidth()或view.getMeas ...

  3. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  4. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  5. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  6. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  7. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  8. React Native学习(一) 环境搭建

    需安装工具 RN环境: [必须] Node [必须] react-native-cli [可选] Node Package Manager(npm):node包管理工具,一般安装Node会带上npm ...

  9. 在渲染前获取 View 的宽高

    在渲染前获取 View 的宽高 这是一个比较有意义的问题,或者说有难度的问题,问题的背景为:有时候我们需要在view渲染前去获取其宽高,典型的情形是,我们想在onCreate.onStart.onRe ...

随机推荐

  1. Kettle 创建 Transformation

    1.第一步,先准备数据和工具 安装好mysql以及客户端工具 数据: USE `test`; CREATE TABLE `account` (   `id` int(11) NOT NULL AUTO ...

  2. Jupyter增加内核

    本例的Jupyter安装在Python3下,以增加Python2内核为例. 首先确认在Python3下已安装了内核: ipython kernel install --user #or python3 ...

  3. ORA-04091: 表 发生了变化, 触发器/函数不能读它

    触发器中新调用了一个存储过程. 触发器: create or replace trigger tr_credits_wzclorder_clwzjk after update on app_wzclo ...

  4. 8.实现(Realization)

    实现关系是用来描述接口和实现接口的类或者构建结构之间的关系,接口是操作的集合,而这些操作就用于规定类或者构建结构的一种服务. 在接口和类之间的实现关系中,类实现了接口,类中的操作实现了接口中所声明的操 ...

  5. 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 ...

  6. WPF仿360卫士9.0界面设计

    Chrome插件——一键保存网页为PDF1.0 http://blog.csdn.net/bdstjk/article/details/9208313 仿照网上的一个代码写的,地址找不到了. 将窗体, ...

  7. Yeoman+Express+Angular在Linux上开发配置方法

    $mkdir ExpressWithAngularTest $cd ExpressWithAngularTest choose needed components you'd like to add ...

  8. android获取/更改gps和WIFI状态

    一.WIFI状态的获取和更改 适用于 SDK1.0 , SDK1.5 1.获取WIFI状态 方法1:通过WifiManager进行操作 1WifiManager wifiManager = (Wifi ...

  9. ajax开发框架和XMLhttpRequest、responseText、responseXml和JSON的应用

    1 AJAX开发框架 2 A 初始化XMLHttpRequest对象 3 B指定响应处理函数 4 C发出HTTP请求 5 D处理服务器返回的信息 6 数据格式提要 6 优点 6 缺点 7 解析 JSO ...

  10. [AngularJS+ GSAP] Greensock TimelineLite Animation Sequences

    TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequen ...