我如何创建一个反应式全屏模式，该模式将使用选项卡覆盖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>
  );
};

这会导致模式从底部向上滑动，但它从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',
  },
}