レイアウトの測定

場合によっては、全体のレイアウトに変更を加えたり、判断を下して特定のロジックを呼び出したりするために、現在のレイアウトを測定する必要があります。

React Nativeは、ビューの測定値を知るためのネイティブメソッドをいくつか提供しています。

これらのメソッドを呼び出す最良の方法は、`useLayoutEffect`フックを使用することです。これにより、これらの測定値の最新値が得られ、測定値が計算されたのと同じフレームで変更を適用できます。

典型的なコードは次のようになります

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

  useLayoutEffect(() => {
    targetRef.current?.measure(({measurements}) => {
      //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`。