javascript - react native : Getting the position of an element

Question

我正在设计一个带有 flexbox 的 Image 组件，使其位于屏幕中央，效果很好。现在我想要第二个 Image 组件直接显示在第一个组件的顶部。第二张图片使用的是绝对定位。目前我只是猜测像素以使其适合，但这当然不准确并且需要太多的可维护性工作。

我非常想寻找与 jQuery 的 .offset() 等效的 React Native。是否存在这样的事情？如果没有，实现这一目标的最佳方法是什么？

Answer 1

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(...) 中得到零，那么将其包装在 setTimeout 中应该可以解决问题，即:

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