javascript - attribute - title css

React Native: obtener la posición de un elemento

Question

Estoy diseñando un componente de Image con flexbox para que esté en el centro de la pantalla, lo que funciona bastante bien. Ahora quiero que se muestre un segundo componente de imagen directamente en la parte superior del primero. La segunda imagen está utilizando posicionamiento absoluto. Actualmente solo estoy adivinando píxeles para que se ajuste, pero, por supuesto, esto no es preciso y requiere demasiado esfuerzo de mantenimiento.

Estoy más o menos buscando el equivalente React Native de jQuery''s .offset() . ¿Existe tal cosa y, si no existe, cuál es la mejor manera de lograrlo?

Answer 1

Esto parece haber cambiado en la última versión de React Native cuando se usan referencias para calcular.

Declara a los árbitros de esta manera.

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

Y encuentre el valor de esta manera.

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

Answer 2

Necesitaba encontrar la posición de un elemento dentro de ListView y usé este fragmento que funciona como .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);
  });

Esto supone que tenía un ref=''myElement'' en mi componente.

Answer 3

Puede usar onLayout para obtener el ancho, la altura y la posición relativa de un componente en el primer momento en que estén 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);
  }}
>

En comparación con el uso de .measure() como se muestra en la respuesta aceptada , esto tiene la ventaja de que nunca tendrá que .measure() el .measure() aplazando sus llamadas .measure() con setTimeout para asegurarse de que las mediciones estén disponibles, pero la desventaja es que no le da desplazamientos relativos a toda la página, solo los relativos al elemento primario del elemento.

Answer 4

React Native proporciona un .measure(...) que toma una devolución de llamada y la llama con los desplazamientos y el ancho / alto de un componente:

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

Ejemplo...

A continuación se calcula el diseño de un componente personalizado después de que se procesa:

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

Notas de error

• Tenga en cuenta que a veces el componente no termina de renderizarse antes de componentDidMount() se llame a componentDidMount() . Si obtiene ceros como resultado de la measure(...) , envolverlo en un setTimeout debería resolver el problema, es decir:

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

Answer 5

Tuve un problema similar y lo resolví combinando las respuestas anteriores

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

Ahora puedo ver la posición de mi elemento feedPost en los registros:

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