如何在React Native中获取组件在屏幕上的位置

Question

我正在使用React Native应用程序，我想处理屏幕上的触摸。

一种用例是当用户在屏幕上"按"时，我希望能够在屏幕上获得特定组件的位置（x，y），以了解它是否与触摸的（x，y）匹配。

我已经在堆栈溢出上搜索了，但是给定的解决方案都没有工作...

在我的根组件中：

_onPress = () => {
    // How can I get the position of my component ?
    this._myComponent.xxx();
};
render() {
    return (
        <View><MyComponent ref={(r) => this._myComponent = r;} /></View>
    );
}

编辑：尝试此解决方案后（反应本机：获取元素的位置），我将其工作如下：

在mycomponent.js中：

getPosition () => {
    this._ref._component.measure((width, height, px, py, fx, fy) => {
        const location = {
            fx: fx,
            fy: fy,
            px: px,
            py: py,
            width: width,
            height: height
        }
        console.log(location)
    });
};
render() {
    return (
        <View ref={(r) => { this._ref = r;} } />
    );
}

感谢您的帮助！

Answer 1

react Native

您可以使用.measure()：

this._myComponent._component.measure((width, height, px, py, fx, fy) => {
  // do positioning checks here
}

确定给定视图的屏幕，宽度和高度上的位置，并通过异步回调返回值。如果成功，将使用以下参数调用回调：x，y，width，height，pageX，pageY。

文档：https：//facebook.github.io/reaect-native/docs/direct-manipulation.html#other-native-methods

---

Web API（无反应本机）

如果您正在使用DOM节点，则可以使用Element.getBoundingClientRect()：

let domRect = this._myComponent.getBoundingClientRect();
let { x, y } = domRect;

结果是包含整个元素的最小矩形，其中仅左，顶，右，底部，x，y，宽度和高度属性描述了像素中的整体边框框。宽度和高度以外的属性相对于视口的左上角。

文档：https：//developer.mozilla.org/en-us/docs/web/api/element/getBoundingClientRect

Answer 2

对于使用uce eact inect in react本机中的函数组件中的示例：

const BoardSquare = props => {
  const squareRef = useRef(null);
  console.log('squareRef', squareRef);
  const doMeasure = square => {
    squareRef.current.measure((width, height, px, py, fx, fy) => {
      const location = {
        fx: fx,
        fy: fy,
        px: px,
        py: py,
        width: width,
        height: height,
      };
      console.log('location', location);
      square.x = fx;
      square.y = fy;
      square.xMax = fx + px;
      square.yMax = fy + py;
    });
  };
  return (
    <Square
      {...props}
      ref={squareRef}
      filled={props.square.filled}
      onLayout={() => doMeasure(props.square)}
    />
  );
};

Answer 3

另一个选项是使用onLayout。示例

const [viewHeight, setViewHeight] = React.useState(0);
return (
  <View
    onLayout={e => {
      e.persist();
      setViewHeight(e && e.nativeEvent ? e.nativeEvent.layout.height : 0);
    }}
  />
);

更深入的示例

LayoutEvent的文档