在 React Navigation v6 中组织屏幕/组结构

Question

我正在尝试将旧的 React navigation v4 迁移到 v6（超过 100 条路线）。但我面临着如何找到最佳结构来分割单独文件/组件中的屏幕组。

我已经尝试过这样做，以移出模态：

const ModalGroup = () => (
  <Stack.Group screenOptions={{ presentation: "modal" }}>
    <Stack.Screen name="ModalA" component={ModalAScreen} />
    <Stack.Screen name="ModalB" component={ModalBScreen} />
  </Stack.Group>
);

export const RootNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <ModalGroup />
  </Stack.Navigator>
);

但在运行时不允许出现此错误：

错误：导航器只能包含“Screen”、“Group”或“React.Fragment”作为其直接子级（找到“ModalGroup”）。要在导航器中渲染此组件，请将其在 'component' 属性中传递给 'Screen'。

但这是有效的（但对我来说看起来很难看）：

export const RootNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    {ModalGroup()}
  </Stack.Navigator>
);

那么，在单独的文件中构建/组织屏幕组以避免创建包含所有配置和导入的巨大根导航器的最佳方法是什么？