测量布局

有时，您需要测量当前布局以对整体布局应用某些更改，或做出决策并调用某些特定逻辑。

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`。