反应导航/本机：无法导航到“抽屉-> TopTab->堆栈”导航布局中的堆栈屏幕

Question

我正在构建一个反应式应用程序，该应用程序需要显示产品详细信息，并能够使用 SuperCategories-> Categories-> Products 分层导航对其进行浏览。

导航器的组织方式如下：

DrawerNavigator
    SuperCategoriesScreen
        TopTabNavigator
            Tab1Screen
                StackNavigator
                    CategoriesScreen
                    ProductsScreen
            Tab2Screen
                StackNavigator
                    CategoriesScreen
                    ProductsScreen
            Tab3Screen
                StackNavigator
                    CategoriesScreen
                    ProductsScreen
    NotificatiosScreen

屏幕截图：

问题是，当单击某个类别（例如CAT1按钮）时，尽管相应的ProductsScreen（根据日志）已呈现，但仍被CategoriesScreen覆盖。

还观察到每次都渲染所有TabScreen。

我需要帮助来确定代码是否有问题。谢谢。

应用程序的代码如下：

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Button, View } from 'react-native';

export default function App() {

  const SuperCategoriesScreen = ({ navigation }) => {

    const ProductsScreen = ({ category }) => {
      console.log("Products Screen...................");
      return (
        <View>
          {
            [1, 2, 3].map((i) =>
              <View key={i} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 20 }}>
                <Button onPress={() => { }} title={'   Product' + i + '   '} />
              </View>
            )
          }
        </View>
      );
    }

    const CategoriesScreen = ({ route, navigation }) => {
      return (
        <View>
          {
            [1, 2, 3].map((i) =>
              <View key={i} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 20 }}>
                <Button onPress={() => navigation.push('Products')} title={'   Cat' + i + '   '} />
              </View>
            )
          }
        </View>
      );
    }

    const getTabScreen = (superCategory) => {
      return () => {
        const Stack = createStackNavigator();
        return (
          <Stack.Navigator >
            <Stack.Screen name={superCategory} component={CategoriesScreen} options={{ headerShown: false }} initialParams={{ superCategory: superCategory }} />
            <Stack.Screen name={'Products'} component={ProductsScreen} />
          </Stack.Navigator>
        );
      }
    }

    const TopTab = createMaterialTopTabNavigator();
    return (
      <TopTab.Navigator >
        {[1, 2, 3].map((i) =>
          <TopTab.Screen key={"SuperCat" + i} name={"SuperCat" + i} component={getTabScreen("SuperCat" + i)} />
        )}
      </TopTab.Navigator >
    );
  }

  const NotificationsScreen = ({ navigation }) => {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button onPress={() => navigation.goBack()} title="Go back home" />
      </View>
    );
  }

  const Drawer = createDrawerNavigator();
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="SuperCategories" component={SuperCategoriesScreen} options={{ title: "Products" }} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>);
}