Javascript TabNavigator和StackNavigator之间的Reaction Native中的导航问题

几天来，我一直被一个问题绊倒，但我找不到解决方案……在我的应用程序中，我有一个tabNavigator和一个stackNavigator.

我的问题是，在我的tabNavigator中，我想在我的HeaderRight中放一个图标，当你点击它时，你就会进入与我的购物车对应的堆栈.当我在导航器中输入我的堆栈的名称"Cart"时，我得到一个错误:The action 'NAVIGATE' with payload {"name": "Cart"} was not handled by any navigator. Do you have a screen named 'Cart'?

当我需要导航到My Stack时，我只能导航到Tab.Screen.

我的TabNavigator:

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  const navigation = useNavigation();
  return (
    <Tab.Navigator
      screenOptions={() => ({
        headerStyle: {
          backgroundColor: appColors.primary,
          height: Platform.OS === "ios" ? 60 : undefined,
        },
        headerTitle: () => <Logo />,
        headerTitleAlign: "center",
        headerRight: () => (
          <Feather
            name="shopping-cart"
            size={24}
            color="white"
            onPress={() => {
              navigation.navigate("Cart");
            }}
          />
        ),
        headerRightContainerStyle: {
          paddingEnd: 10,
        },
      })}
    >
      <Tab.Screen
        name="News"
        component={HomePageStack}
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <Entypo name="news" size={40} color="black" />
          ),
          tabBarShowLabel: false,
        }}
      />
      <Tab.Screen
        name="Cheval"
        component={HorseStack}
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialCommunityIcons name="horse" size={40} color="black" />
          ),
          tabBarShowLabel: false,
        }}
      />
      <Tab.Screen
        name="Sell"
        component={SellStack}
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <Entypo name="shopping-basket" size={40} color="black" />
          ),
          tabBarShowLabel: false,
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNavigator;

和我的StackNavigator:

const Stack = createStackNavigator<RootStackParamList>();

const MainStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="HomePage"
        component={HomePageStack}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

// Stack for the news
const HomePageStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="DetailsNewsScreen"
        component={DetailsNewsScreen}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

const HorseStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Horse"
        component={HorseScreen}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

const SellStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="SellStack"
        component={HomeSellScreen}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="ServicesSell"
        component={ServicesScreen}
        options={{
          title: "",
          headerBackTitle: "Retour",
        }}
      />
      <Stack.Screen
        name="ClothesScreen"
        component={ClothesScreen}
        options={{
          title: "",
          headerBackTitle: "Retour",
        }}
      />
      <Stack.Screen
        name="HorseActivity"
        component={HorseActivityScreen}
        options={{
          title: "",
          headerBackTitle: "Retour",
        }}
      />
    </Stack.Navigator>
  );
};

const LoginStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

const CartStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Cart"
        component={HomeScreenCart}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

export {
  MainStackNavigator,
  HomePageStack,
  HorseStack,
  SellStack,
  LoginStack,
  CartStack,
};

我试着使用屏幕选项的props ，但不起作用.我也试着用useNavigation来使用导航，但同样不起作用.