react-native - 如何在 React Native 中找到组件的 x,y 位置

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 添加到您的类(class)中

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

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

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

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