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

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

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

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


react-native reactjs react-navigation statusbar react-navigation-bottom-tab
person mcabrejos24    schedule 10.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Что-то вроде этого:

import Constants from "expo-constants";

...

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight
  }
});
person Jono    schedule 10.07.2020
comment
Я попытался добавить это в контейнер навигации, но это не сработало. с реактивной навигацией 5 он не использует appContainer, и я использую такие функциональные компоненты, как показано в новой документации, не уверен, почему это не работает или нет? - person mcabrejos24; 10.07.2020
comment
подождите, я добавил его в createMaterialTopTabNavigator.Navigator, и он там сработал! спасибо - person mcabrejos24; 10.07.2020