javascript - 如何创建一个 react native 全屏模式，它将覆盖带有选项卡的 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