React Navigation Stack 覆盖底部选项卡

Question

我是一名学习 React Native 的学生，我正在尝试创建一个显示食谱的应用程序。主页上的设计是这样的：

当我点击一个食谱项目时，它会打开食谱详细信息页面，如下所示：

如您所见，底部选项卡被新打开的屏幕覆盖，但我希望它看起来像这样：

我真的不知道该怎么做。这里有一些代码：

const RootStack = createStackNavigator();
const AppStack = createBottomTabNavigator();

const AppNavigator = (props) => {
  return (
     <AppStack.Navigator
            screenOptions={{
                headerShown: false,
                tabBarShowLabel: false,
                showIcon: true,
            }}
        >
            <AppStack.Screen
                name="Home"
                options={{
                    tabBarIcon: ({ focused }) => (
                        <MaterialCommunityIcons
                            name="chef-hat"
                            size={moderateScale(25)}
                            color={focused ? COLORS.primary : COLORS.secondary}
                        />
                    ),
                }}
            >
                {(screenProps) => (
                    <Home
                        {...screenProps}
                        updateAuthState={props.updateAuthState}
                    />
                )}
            </AppStack.Screen>
     </AppStack.Navigator>
  )
}



function App() {
  return (
    <NavigationContainer>
       {isUserLoggedIn === "initializing" && <Initializing />}
       {isUserLoggedIn === "loggedIn" && (
           <>
               {/* <AppNavigator updateAuthState={updateAuthState} /> */}
               <RootStack.Navigator
                   screenOptions={{
                       headerShown: false,
                   }}
                >
                   <RootStack.Screen
                       name="Main"
                       component={AppNavigator}
                    />
                    <RootStack.Screen name={"Filter"} component={Filter} />
                    <RootStack.Screen name={"Recipe"} component={Recipe} />
                </RootStack.Navigator>
            </>
        )}
        {isUserLoggedIn === "loggedOut" && (
            <AuthenticationNavigator updateAuthState={updateAuthState} />
        )}
    </NavigationContainer>
  )
}

我已经用谷歌搜索并尝试了不同的解决方案。希望有人能帮助我。