Réagir Natif: Obtenir la position d'un élément

Je suis style un Image composant avec flexbox pour être dans le centre de l'écran, qui fonctionne assez bien. Maintenant, je veux un deuxième Image composant à être affichés directement sur le dessus de la première. La deuxième image est d'utiliser le positionnement absolu. Actuellement, je suis juste deviner pixels de sorte qu'il s'adapte, mais bien sûr ce n'est pas précis et beaucoup trop de maintenabilité de l'effort.

Je suis à peu près à la recherche pour Réagir Natif équivalent de jQuery .offset(). Est-il une telle chose et si il n'y a pas quelle est la meilleure façon d'atteindre cet objectif?

InformationsquelleAutor Johannes Stein | 2015-05-07

Réagir Natif fournit un .mesure(...) méthode qui prend un callback et l'appelle avec le décalage et la largeur/hauteur d'un composant:

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

Exemple...

Le suivant calcule la mise en page d'un composant personnalisé après, il est rendu:

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

Bug notes

Noter que, parfois, le composant n'a pas fini de rendu avant componentDidMount() est appelé. Si vous obtenez des zéros comme un résultat de measure(...), puis en l'enveloppant dans un setTimeout devrait résoudre le problème, c'est à dire:
```
setTimeout( myComponent.measure(...), 0 )
```

De cette façon, de l'invocation de measure ne fonctionne pas pour moi. A dû passer de l'élément de poignée: const handle = findNodeHandle(this.refs.dropdown); UIManager.measure(handle, (x, y, ...) ...)
Impossible de lire la propriété 'appliquer' undefined.
setImmediate(...) il existe maintenant de remplacer setTimeout(..., 0) . Il a le même comportement, mais elle présente quelques sémantique autour de votre appel timing.
Première fois de défilement en mouvement dans la bonne position. Mais après ça, Y offset à la valeur de page n'est pas correcte. Savez-vous pourquoi il n'arrive?
onLayout est le moyen privilégié pour ce faire

InformationsquelleAutor tohster

27

Vous pouvez utiliser onLayout pour obtenir la largeur, la hauteur et la parent à parent position d'un composant au plus tôt au moment où ils sont disponibles:
```
<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);
  }}
>
```
Par rapport à à l'aide de .measure(), comme indiqué dans la accepté de répondre à, cela a l'avantage que vous n'aurez jamais à bricoler autour de reporter votre .measure() appels avec setTimeout pour s'assurer que les mesures sont disponibles, mais l'inconvénient qu'il ne vous donne pas les décalages par rapport à l'ensemble de la page, seuls par rapport à celle de l'élément parent.
- Vous pouvez combiner des réponses à ces questions dans le onLayout appel de la mesure (la)
- C'est beaucoup plus concis que de jouer avec des délais d'attente!
InformationsquelleAutor Mark Amery
18

J'ai besoin de trouver la position d'un élément à l'intérieur d'une ListView et utilisé cet extrait de code qui fonctionne un peu comme .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);
  });
```
Cela suppose, j'ai eu un ref='myElement' sur mon composant.
- Notez que comme la accepté de répondre - vous devrez peut-être placer l'appel UIManager.measureLayoutRelativeToParent dans un setTimeout appel pour l'empêcher de erroring arrière si vous êtes l'exécution de ce code à partir d'un point dans le composant du cycle de vie avant qu'il ait été rendu. Notez également que pour les modernes Réagir Natifs, vous aurez envie de faire import { UIManager, findNodeHandler } from 'react-native' plutôt que l'exige montré ici.
- C'est ce que je cherchais.
InformationsquelleAutor Mr Speaker

J'ai eu un problème similaire et résolu en combinant les réponses ci-dessus

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

Maintenant, je peux voir la position de mon feedPost élément dans les journaux:

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

D'où vient le ce.feedPost variable viennent? Avez-vous initialiser quelque part? Je suis pas défini n'est pas une fonction de cela.feedPost.mesurer immédiatement quand je lance mon application
dans la méthode render dans la partie de retour, j'ai la Vue racine: <View onLayout {(event) => {this.handleLayoutChange(event) }} ref={view => { this.feedPost = view; }} > .... de Ce point de Vue est ce.feedPost.
feedPost est le nom de la classe : classe FeedPost

InformationsquelleAutor Mislavoo7

2

Cela semble avoir changé dans la dernière version de Réagir Natif lors de l'utilisation de références à calculer.

Déclarer les références de cette façon.
```
  <View
    ref={(image) => {
    this._image = image
  }}>
```
Et de trouver la valeur de cette façon.
```
  _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)
    })
  }
```
- -1; je ne peux pas reproduire le besoin d'utiliser ._component à Réagir Natif de 0,51 (actuelle de la dernière version en date, sorti 3 jours avant que vous avez posté cette réponse). Vous ne savez pas où vous êtes obtenir à partir d'; pour moi, le premier argument de la ref callback est un composant avec un .measure méthode.
- vous en avez besoin si vous utilisez Animated.View au lieu de View, par exemple.
InformationsquelleAutor Brian F

Vous devez vous connecter pour publier un commentaire.