React Native: Отримання позиції елемента

Я Imageстилюю компонент за допомогою flexbox, щоб він знаходився в центрі екрана, що працює досить добре. Тепер я хочу, щоб другий Imageкомпонент відображався безпосередньо у верхній частині першого. Друге зображення використовує абсолютне позиціонування. В даний час я просто вгадую пікселі, щоб вони підходили, але, звичайно, це не точно і занадто багато зусиль для ремонту.

Я в значній мірі шукаю React Native еквівалент jQuery .offset(). Чи є така річ, і якщо немає, який найкращий спосіб цього досягти?

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щоб переконатися, що вимірювання доступні, але недоліком є ​​те, що це не дає вам зсувів щодо цілу сторінку, лише одну щодо батьківського елемента.

Мені потрібно було знайти позицію елемента всередині 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'компонент.

Я мав подібну проблему і вирішив її, об’єднавши відповіді вище

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

Здається, це змінилося в останній версії React Native при використанні посилань для обчислення.

Заявіть про це таким чином.

  <View
    ref={(image) => {
    this._image = image
  }}>

І знайти цінність таким чином.

  _measure = () => {
    this._image._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)
    })
  }

Якщо ви використовуєте функціональні компоненти і не хочете використовувати a forwardRefдля вимірювання абсолютного макета вашого компонента , ви можете отримати посилання на нього LayoutChangeEventвonLayout зворотному виклику.

Таким чином, ви можете отримати абсолютне положення елемента:

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

Тестується за допомогою React Native 0.63.3.