布局测量

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

有时你需要测量当前布局，以便对整体布局进行调整，或者根据测量结果执行特定逻辑。

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