测量布局

¥Measuring the Layout

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

¥Sometimes, you need to measure the current layout to apply some changes to the overall layout or to make decisions and call some specific logic.

React Native 提供了一些原生方法来了解视图的测量值。

¥React Native provides some native methods to know what are the measurements of the views.

调用这些方法的最佳方式是在 useLayoutEffect 钩子中：这将为你提供这些测量值的最新值，并允许你在计算测量值时在同一帧中应用更改。

¥The best way to invoke those methods is in a useLayoutEffect hook: this will give you the most recent values for those measurements and it will let you apply changes in the same frame when the measurements are computed.

典型代码如下所示：

¥Typical code will look like this:

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 提供的大多数默认组件上都可用。但是，它们不适用于未直接由原生视图支持的复合组件。这通常包括你在自己的应用中定义的大多数组件。

¥The methods described here are available on most of the default components provided by React Native. However, they are not available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.

measure(callback)

确定给定视图视口中屏幕上的位置（x 和 y）、width 和 height。通过异步回调返回值。如果成功，将使用以下参数调用回调：

¥Determines the location on screen (x and y), width, and height in the viewport of the given view. Returns the values via an async callback. If successful, the callback will be called with the following arguments:

• x：视口中测量视图的原点（左上角）的 x 坐标。

  ¥x: the x coordinate of the origin (top-left corner) of the measured view in the viewport.

• y：视口中测量视图的原点（左上角）的 y 坐标。

  ¥y: the y coordinate of the origin (top-left corner) of the measured view in the viewport.

• width：视图的 width。

  ¥width: the width of the view.

• height：视图的 height。

  ¥height: the height of the view.

• pageX：视口中视图的 x 坐标（通常是整个屏幕）。

  ¥pageX: the x coordinate of the view in the viewport (typically the the whole screen).

• pageY：视口中视图的 y 坐标（通常是整个屏幕）。

  ¥pageY: the y coordinate of the view in the viewport (typically the the whole screen).

此外，measure() 返回的 width 和 height 是视口中组件的 width 和 height。

¥Also the width and height returned by measure() are the width and height of the component in the viewport.

measureInWindow(callback)

确定窗口中给定视图的位置（x 和 y）并通过异步回调返回值。如果 React 根视图嵌入到另一个原生视图中，这将为你提供绝对坐标。如果成功，将使用以下参数调用回调：

¥Determines the location (x and y) of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:

• x：当前窗口中视图的 x 坐标。

  ¥x: the x coordinate of the view in the current window.

• y：当前窗口中视图的 y 坐标。

  ¥y: the y coordinate of the view in the current window.

• width：视图的 width。

  ¥width: the width of the view.

• height：视图的 height。

  ¥height: the height of the view.