在RN的页面布局和操作中，有时需要获取元素的大小和位置信息，本文从网上抄袭了几个常用方法，以备不时之需。

首先是获取设备屏幕的宽高

import {Dimensions} from 'react-native';var {height, width} = Dimensions.get('window');

下面介绍获取普通元素的大小和位置信息的方法

方法一：onLayout 事件属性

_onLayout(event){    let {x,y,width,height} = e.nativeEvent.layout}....
    
      this._onLayout}>
    

当组件重新渲染时，该方法就能重新获取到元素的宽高和位置信息，但是有时组件并没有重新render那么就获取不到正确的值，例如页面滚动，但是state没有发生变化，组件也就没有重新渲染。

方法二：元素自带measure方法

首先给元素添加上ref

    
      this.myView = view}>
    

然后需要注意的是需要在componentDidMount方法里面添加一个定时器，定时器里面再进行测量，否则拿到的数据都为0.

componentDidMount(){    setTimeOut(() => {      this.myView.measure((x,y,widht,height,left,top) => {        //todo        })    });}

实际使用过程中我发现这个方法在自定义的组件上会失效，只能应用在RN自带的View等组件上，使用时需要注意一下。

方法三：使用UIManager measure方法

首先引入

import {    UIManager,    findNodeHandle} from 'react-native';

再给组件加上引用

    
     this.myComponent=ref} />
    

最后测量

UIManager.measure(findNodeHandle(this.myComponent),(x,y,width,height,pageX,pageY)=>{                //todo            })