Как создать полноэкранный модальный экран с естественной реакцией, который будет охватывать SafeAreaView с вкладками?

Question

Если у меня есть навигатор с нижней вкладкой, и у меня есть экраны в этом навигаторе, чтобы перейти к модальному режиму, который будет по-настоящему полноэкранным (охватывающий SafeAreaView), как мне это сделать? Из того, что я понимаю, AppContainer должен отображаться в SafeAreaView, если я использую SafeAreaView. Так что сложно использовать модальное значение вне SafeAreaView.

const Tabs = createBottomTabNavigator(
  {
    Home,
    ScreenA,
    ScreenB,
    ScreenC,
  },
  {
    tabBarOptions: {
      safeAreaInset: { bottom: 'never' },
    },
  }
);

const TabsAndModal = createStackNavigator(
  {
    Tabs,
    Modal,
  },
  {
    mode: 'modal',
    headerMode: 'none',
    initialRouteName: 'Tabs',
  },
);

const AppContainer = createAppContainer(TabsAndModal);

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'blue' }}>
      <AppContainer />
    </SafeAreaView>
  );
};

Это заставляет модал скользить снизу вверх, но начинается с SafeAreaView на iphone X, поэтому синий фон виден чуть ниже. Как правильно сделать это, чтобы модал скользил вверх с самого низа iphone x, а вкладки по-прежнему отображались в пределах SafeAreaView?

Answer 1

Я упустил что-то довольно простое в createBottomTabNavigator:

tabBarOptions: {
  style: {
    backgroundColor: 'readTheDocsOfReactNavigationTabs',
  },
}

Answer 2

AppContainer не должен отображаться внутри SafeAreaView. Читайте о том, как справиться с этим в документах: https://reactnavigation.org/docs/en/handling-iphonex.html