React Native View 上 onLayout 的高度值在单个渲染上返回 2 个不同的值

Question

我目前正在使用 React Native。 我在 View 上设置了 onlayout 函数，发现 onLayout 的高度值在一次渲染中返回 2 个不同的值，并且只发生在 z Flip 3 上。

我的代码是这样的：

<View
    ref={viewRef}
    onLayout={(e) => {
        viewRef.current.measureInWindow((x, y) => {
            console.log(x, y);
        });
    }}
 >
{...something}
</View>

组件渲染时onLayout被调用了2次。

当我控制台记录这些值时，“y”的初始值约为 -24，然后变成了 400 左右。

值本身是 -24、400 还是 100 等并不重要，重要的是单次渲染时 y 的值是不同的。

谁能告诉我为什么会这样？

Answer 1

Z Flip的可折叠设计引发了这个问题。初始 onLayout 可能发生在最终屏幕位置之前，导致第一个 y 值。当手机处于最终展开状态时，会发生第二个具有不同 y 的呼叫。

为了解决这个问题，您可以尝试在渲染过程完成后使用onLayout事件触发布局测量，以确保获得准确的x和y坐标值。一种方法是在渲染过程之后使用具有短延迟的 setTimeout 来调度measureInWindow函数：

<View
    ref={viewRef}
    onLayout={(e) => {
        setTimeout(() => {
            viewRef.current.measureInWindow((x, y) => {
                console.log(x, y);
            });
        }, 100); // Adjust the delay as needed
    }}
>
    {...something}
</View>

通过在测量视图尺寸之前添加轻微的延迟，您可以为渲染过程提供足够的时间来完成任何布局调整，从而可能避免 y 值不一致的问题。

以下是一些需要考虑的其他要点：

1. 您可以根据具体手机调整setTimeout中的延迟 型号和您的应用程序的需求。

2. 虽然 setTimeout 是一种常见方法，但某些库可能会提供 用于处理可折叠布局变化的更先进的解决方案 设备。所以你可以尝试排查问题来分析

问题。

针对应用程序中的可折叠设备，您应该知道屏幕折叠/展开会触发屏幕尺寸常量的变化（来自 Dimension 或 useDimension() 等）。因此它也会反映布局。