Question

如何找出元素在屏幕上的位置的x，y位置，我正在使用React Native v0.14。我尝试了以下但是它说测量不是一个函数。

componentDidMount() {
    setTimeout(this.measurePosition);
  },
measurePosition() {
    this.refs.q.measure((a, b, width, height, px,py ) => console.log(width))
},

Answer 1

<强>选项1：

您可以使用NativeMethodsMixin。确保您已将mixin添加到班级

var NativeMethodsMixin = require('NativeMethodsMixin')
...
var MyComponent = React.createClass({
  mixins: [NativeMethodsMixin]
...
componentDidMount: function(){
  this.refs.element.measure((x,y,w,h,pX,pY) => console.log("dets"))
}

选项2

您可以在Views上使用onLayout属性。它适用于大多数组件。

render:function(){
... 
<View onLayout = {this.onLayout} />
...
},
onLayout:function(event){
  console.log(event.nativeEvent.layout)
}

您将获得x，y，宽度和高度

Answer 2

你可以用类似的东西吗？ 1.使用（ReactDOM.findDOMNode（））获取浏览器DOM元素 2.使用元素getBoundingClientRect（）你有顶部，左边，底部和右边的坐标

这可能也很有用Retrieve the position (X,Y) of an HTML element

如何在React native中找到Component的x，y位置

2 个答案: