レイアウトの測定

レイアウト全体にいくつかの変更を適用したり、意思決定を行って特定のロジックを呼び出したりするために、現在のレイアウトを測定する必要がある場合があります。

React Native には、ビューの測定値を知るためのいくつかのネイティブメソッドが用意されています。

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

一般的なコードは次のようになります

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。