Native reagieren: Die Position eines Elements ermitteln

Ich gestalte eine ImageKomponente mit Flexbox so, dass sie sich in der Mitte des Bildschirms befindet, was ziemlich gut funktioniert. Jetzt möchte ich, dass eine zweite ImageKomponente direkt über der ersten angezeigt wird. Das zweite Bild verwendet die absolute Positionierung. Momentan rate ich nur Pixel, damit sie passen, aber das ist natürlich nicht genau und viel zu viel Aufwand für die Wartbarkeit.

Ich bin ziemlich auf der Suche nach dem React Native-Äquivalent von jQuery's .offset(). Gibt es so etwas und wenn nicht, wie kann man das am besten erreichen?

React Native bietet eine .measure(...)Methode, die einen Rückruf entgegennimmt und ihn mit den Offsets und der Breite / Höhe einer Komponente aufruft:

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)
})

Beispiel...

Im Folgenden wird das Layout einer benutzerdefinierten Komponente nach dem Rendern berechnet:

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)
        })        
    }
}

Fehlerhinweise

• Beachten Sie, dass die Komponente manchmal das Rendern nicht beendet, bevor sie componentDidMount()aufgerufen wird. Wenn Sie als Ergebnis Nullen erhalten measure(...), setTimeoutsollte das Problem durch Einwickeln in a gelöst werden, dh:

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

Sie können verwenden onLayout, um die Breite, Höhe und die Position einer Komponente relativ zur übergeordneten Position zum frühestmöglichen Zeitpunkt abzurufen:

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

Im Vergleich zu verwenden , .measure()wie in der akzeptierten Antwort gezeigt , hat dies den Vorteil , dass Sie nie Ihre Geige haben um Aufschub .measure()Anrufe mit , setTimeoutum sicherzustellen , dass die Messungen zur Verfügung stehen, aber der Nachteil , dass es nicht Ihnen Offsets zu dem relativ nicht geben ganze Seite, nur solche relativ zum übergeordneten Element.

Ich musste die Position eines Elements in einer ListView finden und verwendete dieses Snippet, das wie folgt funktioniert .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);
  });

Dies setzt voraus, dass ich eine ref='myElement'auf meiner Komponente hatte.

Ich hatte ein ähnliches Problem und löste es, indem ich die obigen Antworten kombinierte

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; }} >
...

Jetzt kann ich die Position meines feedPost-Elements in den Protokollen sehen:

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

Dies scheint sich in der neuesten Version von React Native geändert zu haben, wenn refs zur Berechnung verwendet werden.

Deklarieren Sie Refs auf diese Weise.

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

Und finden Sie den Wert auf diese Weise.

  _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)
    })
  }