如何在 React Native 中获取组件在屏幕上的位置? [英] How to get the position of a component on screen in react native?

问题描述

我正在开发一个 React Native 应用程序，我想处理屏幕上的触摸.

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

我已经搜索了堆栈溢出，但没有一个给定的解决方案有效...

在我的根组件中:

_onPress = () =>{//如何获取组件的位置?this._myComponent.xxx();};使成为() {返回 (<视图><MyComponent ref={(r) =>this._myComponent = r;}/></View>);}

尝试此解决方案后(React Native:获取元素的位置) 我使它工作如下:

在 MyComponent.js 中:

getPosition() =>{this._ref._component.measure((width, height, px, py, fx, fy) => {常量位置 = {外汇:外汇，飞:飞，像素:像素，py: py,宽度:宽度，高度:高度}控制台日志(位置)});};使成为() {返回 (<查看参考={(r)=>{ this._ref = r;} }/>);}

感谢您的帮助！

解决方案

React Native

你可以使用.measure():

this._myComponent._component.measure((width, height, px, py, fx, fy) => {//在这里做定位检查}

<块引用>

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

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

<小时>

Web API(无 React Native)

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

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

<块引用>

结果是包含整个元素的最小矩形，具有只读的左、上、右、下、x、y、宽度和高度属性，以像素为单位描述整个边框框.宽度和高度以外的属性相对于视口的左上角.

文档:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

I am working on a react native app and I want to handle touches on screen.

One use case is when the user "press" on screen, I want to be able to get the position (x,y) of a specific component on screen to know if it matches the (x,y) of the touch.

I've searched already on stack overflow, but none of the given solutions worked...

In my root component:

_onPress = () => {
    // How can I get the position of my component ?
    this._myComponent.xxx();
};

render() {
    return (
        <View><MyComponent ref={(r) => this._myComponent = r;} /></View>
    );
}

EDIT: After trying this solution (React Native: Getting the position of an element) I made it work as follow:

In 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;} } />
    );
}

Thanks for your help!

解决方案

React Native

You can use .measure():

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

Determines the location on screen, width, and height of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments: x, y, width, height, pageX, pageY.

Docs: https://facebook.github.io/react-native/docs/direct-manipulation.html#other-native-methods

---

Web API (no React Native)

If you're working with a DOM node, you can use Element.getBoundingClientRect():

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

The result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.

Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

这篇关于如何在 React Native 中获取组件在屏幕上的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！