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 ...
随机推荐
- magiczoom 插件去版本(放大镜效果)
在放大镜效果中代码中有 Please upgrade to full version of Magic Zoom Plus™ 去除办法: 在 magiczoom 去版本 magiczoomplus.j ...
- kindeditor 上传图片 显示绝对 路径
在前台页面上 效果图 另外附上 urlType 属性的 参数说明: 改变站内本地URL,可设置空.relative.absolute.domain. 空为不修改URL,relative为相对路径,ab ...
- ADT下开发环境的配置--个人配置啦 Eclipse Color Themes
一. Eclipse Color Themes的安装 首先 这个ADT没有Marketplace Client 需要装一个, 节选自: http://blog.csdn.net/liu37226700 ...
- [p2p]UDP用打洞技术穿透NAT的原理与实现
首先先介绍一些基本概念: NAT(Network Address Translators),网络地址转换:网络地址转换是在IP地址日益缺乏的情况下产生的, ...
- Windows Server 2003下ASP.NET无法识别IE11的解决方法
由于IE11对User-Agent字符串进行了比较大的改动,所以导致很多通过User-Agent来识别浏览器的程序,都相应的出现了无法识别IE11的情况.(普通用户端则可以通过这个方法来进行设置.) ...
- grunt入门之grunt watch的使用
watch几乎是grunt必不可少的应用,一旦配置好watch,保存文件后将立即执行命令 安装方式如下: npm install grunt-contrib-watch --save-dev 安装好以 ...
- 【JavaScript】AJAX教程
AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX是与服务器交换数据并更新部分网页的技术,在不重新加载整个页面的情况下. ...
- [AngularJS] Best Practise - Minification and annotation
Annotation Order: It's considered good practice to dependency inject Angular's providers in before o ...
- Javascript加载执行问题探索
转自:http://www.cnblogs.com/huangxincheng/archive/2011/12/04/2275988.html 前言 最近研究MongoDB数据库,无意间发现的好博客, ...
- mobile响应式页面meta信息相关记录
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scal ...