测量布局
有时,你需要测量当前布局,以便对整体布局进行一些更改或做出决定并调用一些特定的逻辑。
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
。