Как я могу использовать верхний навигатор и нижний навигатор, чтобы верхний навигатор не совпадал со строкой состояния в React Navigation?

Question

Я пытаюсь вложить верхний навигатор в нижний навигатор в интерактивной навигации. Однако когда я это делаю, верхний навигатор сталкивается со строкой состояния. Я предполагаю, что это потому, что нижний навигатор подталкивает его вверх. Но как сделать так, чтобы рядом со строкой состояния отображались оба навигатора? Ниже приведено изображение проблемы с перекрытием. Я использую реагирующую навигацию 5, и любое другое решение использует более старые версии, которые я пробовал и не работает.

Кстати, я кодирую это на iPhone 11, если эта информация необходима .

введите описание изображения здесь

Answer 1

Вы должны установить для стилей контейнера вашего приложения значение marginTop, равное высоте строки состояния. Тогда все ваше приложение будет отображаться под строкой состояния.

Примерно так:

import Constants from "expo-constants";

...

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight
  }
});