Question

我需要获取指定坐标处的组件（x，y）列表，最好是从孩子到祖父母。如果考虑到绝对定位的组件，那将很棒。

思考：哪些组件（以什么顺序）将有机会对（x，y）处的单击/触摸事件做出反应。

我目前正在尝试建立一种机制，以跟踪存在的每个组件以及它与其他组件的关系（哪个是父级，哪个是子级，因此我可以对其进行排序）。这很丑陋，我希望可以跟踪许多边缘情况，组件，并且需要了解它们并与之合作，而且我认为我只是在重新实现已经存在的东西。

编辑：（可能）这与测量无关。这是关于询问“当前在像素（123,456）下呈现了哪些组件”

Answer 1

measure是对任何组件进行更新的本机默认方法。

下面是帮助您获取x和y坐标的示例：

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

Answer 2

要查找子代相对于父代的位置，您需要做的是将父代引用传递给measureLayout函数，如下所示：-

import {findNodeHandle} from 'react-native';

calculateDimensions(){
 const handler = findNodeHandle(this.rootRef);
 this.childRef.measureLayout(handler, ( X_Position, Y_Position, Width, Height ) =>
 {
            this.setState({ 

              X_Dimension : X_Position,

              Y_Dimension: Y_Position,

              Child_View_Height: Height, 

              Child_View_Width: Width 

            });
  });
}

//Parent with nested child
<View ref={(ref) => this.rootRef = ref}>
 <View ref={(ref) => this.childRef = ref}>
 </View>
</View>

希望这会有所帮助

如何在屏幕上的特定x，y坐标处获得对组件的引用

2 个答案: