測量佈局

有時，您需要測量目前的佈局，以對整體佈局應用一些變更，或做出決策並調用一些特定的邏輯。

React Native 提供了一些原生方法來得知視圖的測量值。

調用這些方法的最佳方式是在 useLayoutEffect Hook 中：這將為您提供這些測量值的最新值，並讓您在計算測量值時在同一影格中應用變更。

典型的程式碼看起來會像這樣

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

注意

此處描述的方法在 React Native 提供的多數預設組件上都可用。然而，它們在並非由原生視圖直接支援的複合組件上不可用。這通常包括您在自己的應用程式中定義的大多數組件。

measure(callback)

決定給定視圖在視口中的螢幕位置 (x 和 y)、width 和 height。透過非同步回呼傳回值。如果成功，將使用以下引數調用回呼

• x：測量視圖在視口中原點（左上角）的 x 座標。
• y：測量視圖在視口中原點（左上角）的 y 座標。
• width：視圖的 width。
• height：視圖的 height。
• pageX：視圖在視口（通常是整個螢幕）中的 x 座標。
• pageY：視圖在視口（通常是整個螢幕）中的 y 座標。

此外，measure() 傳回的 width 和 height 是視口中組件的 width 和 height。

measureInWindow(callback)

決定給定視圖在視窗中的位置 (x 和 y)，並透過非同步回呼傳回值。如果 React 根視圖嵌入在另一個原生視圖中，這將為您提供絕對座標。如果成功，將使用以下引數調用回呼

• x：視圖在目前視窗中的 x 座標。
• y：視圖在目前視窗中的 y 座標。
• width：視圖的 width。
• height：視圖的 height。