React Native Modal не отображается под StatusBar на Android

Question

В React Native (с EXPO) я показываю модал.Модал отрисовывается за StatusBar в iOS, но не происходит в Android.

Знаете ли вы, почему?Я не смог найти никакого решения для этого.

StatusBar уже установил translucent={true} prop.Вот почему вы можете увидеть карту за StatusBar на Android.Но я не могу нарисовать модальный компонент позади него (как я могу это сделать на iOS).

Здесь я добавляю пару скриншотов и онлайн-просмотрщик, чтобы проверить это поведение: https://snack.expo.io/BJR4oF4A7

Другое странное поведение, которое я наблюдаю, это то, что не имеет значения, какое значение translucent я установил, оно всегда работает одинаково (оно всегда полупрозрачно, даже когда я устанавливаю его на false).

В случае, если это невозможно, как я могу установить фон для #FFF и цвет шрифта # 000 на StatusBar на Android?

Я хочу знать:

1. Почему в iOS и Android существует разное поведение.
2. Почему изменение реквизита StatusBar все еще не меняет его поведение (это можно увидеть в онлайн-средстве просмотра, изменив значения translucent или backgroundColor)
3. Если невозможно нарисовать модал за StatusBar, как я могу изменить фон и цвет шрифта при открытии модала?(в Android) (без его скрытия)

Android

iOS

Answer 1

Установите для barStyle контрастный backgroundColor.

Черная надпись на белом фоне, поэтому в строке состояния отображается темный контент.

<StatusBar barStyle="dark-content" backgroundColor={"#fff"} />

Answer 2

Я считаю, что вам нужно попробовать приложение как отдельное приложение, не используя клиент Expo.Иногда ему сложно работать с StatusBar (я тоже это уже испытал). Вы можете использовать свойство hidden, работающее на обеих платформах, в зависимости от вашего текущего состояния: <StatusBar hidden={!!this.state.isModalShown} />

Это будет просто скрывать строку состояния всякий раз, когда ваш модальный открывается.