React Native 提供了一种.measure(...)方法，该方法接受回调并使用组件的偏移量和宽度/高度调用它：

myComponent.measure( (fx, fy, width, height, px, py) => {

    console.log('Component width is: ' + width)
    console.log('Component height is: ' + height)
    console.log('X offset to frame: ' + fx)
    console.log('Y offset to frame: ' + fy)
    console.log('X offset to page: ' + px)
    console.log('Y offset to page: ' + py)
})

例子...

以下计算渲染后的自定义组件的布局：

class MyComponent extends React.Component {
    render() {
        return <View ref={view => { this.myComponent = view; }} />
    }
    componentDidMount() {
        // Print component dimensions to console
        this.myComponent.measure( (fx, fy, width, height, px, py) => {
            console.log('Component width is: ' + width)
            console.log('Component height is: ' + height)
            console.log('X offset to frame: ' + fx)
            console.log('Y offset to frame: ' + fy)
            console.log('X offset to page: ' + px)
            console.log('Y offset to page: ' + py)
        })        
    }
}

错误说明

• 请注意，有时组件在componentDidMount()调用之前未完成渲染。如果您从 中得到零measure(...)，那么将它包装在 a 中setTimeout应该可以解决问题，即：

  setTimeout( myComponent.measure(...), 0 )
  

您可以使用它们在可用的最早时刻onLayout获取组件的宽度、高度和相对于父级的位置：

<View
  onLayout={event => {
    const layout = event.nativeEvent.layout;
    console.log('height:', layout.height);
    console.log('width:', layout.width);
    console.log('x:', layout.x);
    console.log('y:', layout.y);
  }}
>

与接受的答案中所示的使用.measure()相比，这样做的优点是您永远不必摆弄推迟.measure()呼叫setTimeout以确保测量可用，但缺点是它不会为您提供相对于整个页面，只有与元素的父元素相关的页面。

我有一个类似的问题并通过结合上面的答案解决了它

class FeedPost extends React.Component {
  constructor(props) {
    ...
    this.handleLayoutChange = this.handleLayoutChange.bind(this);
  }


handleLayoutChange() {
    this.feedPost.measure( (fx, fy, width, height, px, py) => {
      console.log('Component width is: ' + width)
      console.log('Component height is: ' + height)
      console.log('X offset to page: ' + px)
      console.log('Y offset to page: ' + py)
    })
  }

  render {
    return(
      <View onLayout={(event) => {this.handleLayoutChange(event) }} 
      ref={view => { this.feedPost = view; }} >
...

现在我可以在日志中看到我的 feedPost 元素的位置：

08-24 11:15:36.838  3727 27838 I ReactNativeJS: Component width is: 156
08-24 11:15:36.838  3727 27838 I ReactNativeJS: Component height is: 206
08-24 11:15:36.838  3727 27838 I ReactNativeJS: X offset to page: 188
08-24 11:15:36.838  3727 27838 I ReactNativeJS: Y offset to page: 870

我需要在 ListView 中找到元素的位置并使用这个片段，它的工作原理类似于.offset：

const UIManager = require('NativeModules').UIManager;
const handle = React.findNodeHandle(this.refs.myElement);
UIManager.measureLayoutRelativeToParent(
  handle, 
  (e) => {console.error(e)}, 
  (x, y, w, h) => {
    console.log('offset', x, y, w, h);
  });

这假设ref='myElement'我的组件上有一个。

如果您使用的功能部件，并且不希望使用forwardRef来衡量你的组件的绝对布局，你可以从它的一个引用LayoutChangeEvent的onLayout回调。

这样，您就可以获取元素的绝对位置：

<MyFunctionComp
  onLayout={(event) => {
    event.target.measure(
      (x, y, width, height, pageX, pageY) => {
        doSomethingWithAbsolutePosition({
          x: x + pageX, 
          y: y + pageY,
        });
      },
    );
  }}
/>

使用 React Native 0.63.3 测试。