android - React Native Modal 未绘制在 Android 上的 StatusBar 下方

Question

在 React Native(使用 EXPO)中，我展示了一个模态框。Modal 在 iOS 中被绘制在 StatusBar 后面，但在 Android 上并没有发生。

你知道为什么吗？我找不到任何解决方案。

StatusBar 已经设置了 translucent={true} 属性。这就是为什么您能够在 Android 上的 StatusBar 后面看到 map 的原因。但是我不能在它后面绘制 Modal 组件(就像我在 iOS 上可以做的那样)。

我在这里添加了几个屏幕截图和一个在线查看器来检查此行为:https://snack.expo.io/BJR4oF4A7

我看到的另一个奇怪的行为是，无论我设置哪个 translucent 值，它总是以相同的方式工作(它总是半透明的，即使我将它设置为 假)。

如果这是不可能的，我如何在 Android 的 StatusBar 上将背景设置为#FFF 并将字体颜色设置为#000？

我想知道:

1. 为什么在 iOS 和 Android 中有不同的行为。
2. 为什么改变 StatusBar 的属性仍然没有改变它的行为(可以在在线查看器中看到，改变 translucent 或 backgroundColor 值)
3. 如果无法在 StatusBar 后面绘制模态框，那么，当模态框打开时，我该如何更改它的背景和字体颜色？ (在 Android 中)(没有隐藏)

安卓

iOS

Answer 1

1. 我认为您需要将该应用作为独立应用来试用，而不是使用 Expo 客户端。不知何故，它有时很难处理 StatusBar(我也已经经历过)。
2. 您可以使用 hidden根据您当前的状态，在两个平台上都可用的属性:<StatusBar hidden={!!this.state.isModalShown} />

这将在您的模式打开时简单地隐藏状态栏。