React Native SaveAreaView 在 iPhone X+ 的缺口下方有很大的“余量”，但在经典 iPhone 上的余量很小，而在 Android 上则没有？

Question

我有一个组件，放置在绝对位于顶部的 a 内。我还添加了一些用于测试的彩色框。

当然我希望组件显示在经典 iPhone 的缺口和顶部栏之外。

然而，它似乎并没有像预期的那样表现。正如您在屏幕截图中看到的，iPhone SE 的顶部栏和我的组件之间有一个很小的边距。这看起来不错。报告的插图是 20pt.

在有缺口的 iPhone 13 mini 上，缺口底部和我的组件之间有更大的余量。

在 Android 上，我的组件正好放在视图的顶部，上面没有边距。

无论我使用

useSafeAreaInsets()

钩子，还是将我的组件放在

<SafeAreaView>

中，结果都是一样的。

从模拟器的实验来看，我猜安全区域插图在不同的设备上是不同的，例如，13 Mini 有 50pt 顶部插图，13 Pro 有 47 pt 顶部插图，X 有 44 pt 顶部插图。

无论如何，如果我希望布局看起来有些一致，而不向我的组件添加额外的顶部边距，从而使带有缺口的 iPhone X+ 上的总顶部边距更大，那么处理这个问题的最佳方法是什么？