RN頁面獲取組件位置和大小的方法

在RN的頁面布局和操作中，有時需要獲取元素的大小和位置信息，本文從網上抄襲了幾個常用方法，以備不時之需。
首先是獲取設備屏幕的寬高

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

下面介紹獲取普通元素的大小和位置信息的方法
方法一：onLayout 事件屬性

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

當組件重新渲染時，該方法就能重新獲取到元素的寬高和位置信息，但是有時組件並沒有重新render那么就獲取不到正確的值，例如頁面滾動，但是state沒有發生變化，組件也就沒有重新渲染。

方法二：元素自帶measure方法
首先給元素添加上ref

<View ref={(view) => this.myView = view}></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';

再給組件加上引用

<MyComponent  ref={(ref)=>this.myComponent=ref} />

最后測量

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