如何创建一个反应本机全屏模式，它将覆盖带有选项卡的 SafeAreaView？

Question

如果我有一个底部选项卡导航器并且我在该导航器中的屏幕导航到一个真正全屏的模式（覆盖 SafeAreaView），我该怎么做？据我了解，如果我使用 SafeAreaView，AppContainer 必须在 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>
  );
};

这会导致模态从底部向上滑动，但它从 iphone X 上的 SafeAreaView 开始，因此蓝色背景在下方可见。执行此操作的正确方法是什么，以便模式从 iphone x 的最底部向上滑动并且选项卡仍呈现在 SafeAreaView 内？

Answer 1

AppContainer 不应在 SafeAreaView 内呈现。在文档中阅读有关如何处理它的信息：https://reactnavigation.org/docs/en/handling-iphonex.html

Answer 2

我在 createBottomTabNavigator 中忽略了一些相当简单的事情：

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