когда я пытаюсь перейти к navigation.navigate, возникает эта ошибка

Не удается прочитать свойство ‘navigate’ неопределенного

это мой код

когда я пытаюсь перейти к navigation.navigate, возникает эта ошибка

Не удается прочитать свойство ‘navigate’ неопределенного

это мой код

card.js

 const Card = ({
  navigation,
  item,
  ingredients1,
  ingredients2,
  ingredients3,
}) => {
  console.log("ingredients1:", ingredients1);
  console.log("ingredients2:", ingredients2);
  console.log("ingredients3:", ingredients3);

  const ingredients = ingredients1   ","   ingredients2   ","   ingredients3;
  const ingre1 = ingredients.split(",");
  const ingre = ingre1.filter(function (tem) {
    return tem !== null amp;amp; tem !== undefined amp;amp; tem !== "";
  });
  const continents = item.content1   ","   item.content2   ","   item.content3;
  let score = 0;
  for (let i = 0; i < ingre.length; i  ) {
    if (continents.indexOf(ingre[i]) != -1) {
      score  = 33;
    }
  }
  const _score = String(score);
  const score1 = _score.split(",");

  console.log("score1:", score1);

  const RecipeButton = useCallback(() => {
    navigation.navigate("Explain");
  }, []);

  return (
    <>
      <ImageStyle
        source={{ uri: `http://10.0.2.2:3065/${item.Images[0].src}` }}
      />
      <Explain>
        <Username>{item.User.nickname}</Username>
        <FoodName>{item.name}</FoodName>

        <Ingrepercent>재료 {score1}%일치</Ingrepercent>

        <Recipe onPress={RecipeButton}>
          <Label>Recipe</Label>
        </Recipe>
      </Explain>
    </>
  );
};

export default Card;

 

navigator.js

 const MainNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Main"
        component={Main}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Food"
        component={Food}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Explain"
        component={Explain}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Card"
        component={Card}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};
 

я не знаю, как я могу решить….

пожалуйста, помогите мне

это представление ошибки

Это сработало для меня!

 import { useNavigation } from '@react-navigation/native';
function funcName() {
  const navigation = useNavigation();

  return (
   {/* Your code /*}
  );
}