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 Image directamente encima del primero. La segunda imagen está usando posicionamiento absoluto. Actualmente, solo estoy adivinando píxeles para que encaje, pero, por supuesto, esto no es preciso y requiere demasiado esfuerzo de mantenimiento.
Estoy buscando el equivalente React Native de .offset() de jQuery. ¿Existe tal cosa y, si no existe, cuál es la mejor manera de lograrlo?
React Native proporciona un .measure(...) que recibe una devolución de llamada y la llama con las compensaciones 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) })Lo siguiente calcula el diseño de un componente personalizado después de que se representa:
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) }) } } Tenga en cuenta que a veces el componente no termina de renderizarse antes de que se llame a componentDidMount() . Si obtiene ceros como resultado de measure(...) , entonces envolverlo en un setTimeout debería resolver el problema, es decir:
setTimeout( myComponent.measure(...), 0 )Puede usar onLayout para obtener el ancho, el alto y la posición relativa al principal de un componente en el momento más temprano 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 perder el tiempo posponiendo sus llamadas .measure() con setTimeout para asegurarse de que las medidas estén disponibles, pero la desventaja de que no le da compensaciones relativas a la página completa, solo las relativas al padre del elemento.
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