react-native 获取某一元素的绝对位置(相对于屏幕左上角)

发布网友发布时间：2023-03-28 16:09

共1个回答

热心网友时间：2023-10-27 23:19

DOM结构：

<View style={styles.checkContainer} ref='checkContainer' onLayout={({nativeEvent:e})=>this.layout(e)}>

</View>

对应js方法：

layout=(e)=>{

console.warn(e.layout.y) ;

var UIManager = require('UIManager');

console.warn(e.target);

UIManager.measure(e.target, (x, y, width, height, left, top) => {

console.warn('x:'+x)

console.warn('y:'+y)

console.warn('width:'+width)

console.warn('height:'+height)

console.warn('left:'+left)

console.warn('top:'+top)

})

}

注意：View组件的onLayout（可以得到宽高和相对位置）配合UIManager.measure（可以得到宽高和绝对位置）一起使用

附加知识点：

得到某一dom元素的节点值：

import {findNodeHandle} from 'react-native';

var nodeData = findNodeHandle(this.refs.name);

nodeData即为节点值