javascript - 如何创建响应式(Reactive)全屏模式，该模式将使用选项卡覆盖SafeAreaView？

如果我有一个底部标签导航器，并且该导航器中的屏幕导航到一个真正全屏的模式（覆盖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中呈现？

最佳答案

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

关于javascript - 如何创建响应式(Reactive)全屏模式，该模式将使用选项卡覆盖SafeAreaView？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58306678/