React Native获取组件位置和大小

RN页面中定位或滚动操作时，需要获取元素的大小和位置信息，有几种常用的方法

获取设备屏幕的宽高

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

获取元素的大小和位置信息
1. onLayout事件属性

<View onLayout={this._onLayout}><View>

_onLayout = (e) => {
    let {x,y,width,height} = e.nativeEvent.layout
}
// or
import {NativeModules} from 'react-native'
_onLayout = (e) => {
     NativeModules.UIManager.measure(e.target, (x, y, width, height, pageX, pageY)=>{
         // todo
    })
}

 

x和y表示左上角的顶点坐标，相对于屏幕的左上角（0，0）

2. 元素自带measure方法
在元素上添加ref

<View ref={(ref) => this.chatView = ref}></View>

在componentDidMount方法里添加一个定时器，定时器里再进行测量，否则拿到的数据为0

componentDidMount(){
   setTimeOut(() => {
     this.refs.chatView.measure((x,y,width,height,pageX, pageY) => {
       //todo
       })
   });
}

3. 使用UIManager measure方法

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

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

 

在组件上添加引用

<TouchableButton ref={(ref)=>this.buttonRef=ref} onPress={this.handleClick}/>