Medición del Diseño

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

En ocasiones, necesitas medir el diseño actual para aplicar cambios al esquema general o tomar decisiones y ejecutar cierta lógica específica.

React Native proporciona métodos nativos para conocer las dimensiones de las vistas.

La mejor forma de invocar estos métodos es mediante el hook useLayoutEffect: esto te dará los valores más recientes de las mediciones y te permitirá aplicar cambios en el mismo fotograma donde se calculan las dimensiones.

Un código típico se vería así:

tsx

function AComponent(children) {
  const targetRef = React.useRef(null)

  useLayoutEffect(() => {
    targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
      //do something with the measurements
    });
  }, [ /* add dependencies here */]);

  return (
    <View ref={targetRef}>
     {children}
    <View />
  );
}

Los métodos descritos aquí están disponibles en la mayoría de componentes predeterminados de React Native. Sin embargo, no están disponibles en componentes compuestos que no estén respaldados directamente por una vista nativa. Esto generalmente incluye la mayoría de componentes que defines en tu propia aplicación.

measure(callback)

Determina la posición en pantalla (x e y), width, y height en el viewport de la vista dada. Devuelve los valores mediante un callback asíncrono. Si tiene éxito, el callback recibirá estos argumentos:

• x: coordenada x del origen (esquina superior izquierda) de la vista medida en el viewport.

• y: coordenada y del origen (esquina superior izquierda) de la vista medida en el viewport.

• width: el width de la vista.

• height: el height de la vista.

• pageX: coordenada x de la vista en el viewport (normalmente toda la pantalla).

• pageY: coordenada y de la vista en el viewport (normalmente toda la pantalla).

Además, los width y height devueltos por measure() son el width y height del componente en el viewport.

measureInWindow(callback)

Determina la ubicación (x e y) de la vista dada dentro de la ventana y devuelve los valores mediante un callback asíncrono. Si la vista raíz de React está incrustada en otra vista nativa, esto proporcionará las coordenadas absolutas. Si tiene éxito, el callback recibirá estos argumentos:

• x: coordenada x de la vista en la ventana actual.

• y: coordenada y de la vista en la ventana actual.

• width: el width de la vista.

• height: el height de la vista.