在某个路线上，通过反应进行渲染一个组件

Question

我有一个带有React路由器的堆栈导航器，使用@react-navigation/native-stack。我的主屏幕是一张地图，我有一些菜单组件：

export const App = () => {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            options={{ headerShown: false }}
            component={Home}
          />
          <Stack.Screen
            name="SignIn"
            component={SignIn}
          />
        </Stack.Navigator>
      </NavigationContainer>
  )
}

home是地图组件，signin以及其他一些组件是菜单组件导航到屏幕上，按预期将HOME推出。

我希望能够在某个路由上“导航”到另一个组件，将其称为Overlay。当在此处路由时，我想用覆盖组件放置在home> home组件的一部分上，同时仍在与该部分保持交互性，主屏幕未覆盖。但是，如果我这样做：

       <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            options={{ headerShown: false }}
            component={Home}
          />
          <Stack.Screen
            name="Overlay"
            component={Overlay}
          />
        </Stack.Navigator>

那么home屏幕移开，并由Overlay代替。

当用户被路由到某个路由时，如何显示覆盖在我的主页屏幕顶部的组件？这是对React-Router很容易完成的事情，但是我不确定React-Navigation是否存在相似之处。反应导航不是正确的方法吗？有条件地渲染基于状态/redux变量的覆盖组件更好吗？