测量布局

有时，您需要测量当前布局来对整体布局进行一些更改，或者来做出决策并调用一些特定逻辑。

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。