React Native Modal中的绝对位置在不同设备上不一致

Question

我正在开发一个React Native应用程序。我在屏幕上有一个按钮。当用户单击按钮时，我使用Modal组件在按钮旁边弹出一个小菜单。菜单绝对位于Modal内部。

问题：设备之间的y位置不一致。在iPhone上非常完美。在iPhone X上，它比我想要的位置高约20像素。在Android设备上，它位于我想要的位置上方约4像素。

按钮（位置也是：绝对）没有此问题。它出现在每个设备上的相同位置。

Answer 1

React-Native Modal组件中的x / y坐标系的原点（0,0）在状态栏的左上方。

其他视图的（0,0）点位于顶部边缘，但下方位于状态栏。

因此，必须通过状态栏的高度来增加模态中的y绝对位置。

但是，状态栏在不同设备上的高度不同，因此您必须在代码中进行检查。实际上，我认为状态栏的高度可以改变，例如当您在屏幕顶部有一个正在通话的栏时。

在Android上获取状态栏高度很容易：

import { StatusBar } from 'react-native';
statusBarHeight = StatusBar.currentHeight;

在IOS上更难一些：

import { NativeModules, Platform } from 'react-native';
NativeModules.StatusBarManager.getHeight(result => {
    statusBarHeight = result.height;
});

IOS getHeight()对其参数进行回调，因此您可能需要使用Promise。