Javascript 你好'；我使用react-native和react-navigation

当我尝试导航时，出现此错误

无法读取未定义的属性“导航”

这是我的密码

当我尝试导航时，出现此错误

无法读取未定义的属性“导航”

这是我的密码

card.js

const卡=({
航行
项目,，
根据第1条，
根据第2条，
根据第3条，
}) => {
console.log（“ingredients1:”，ingredients1）；
console.log（“ingredients2:”，ingredients2）；
console.log（“ingredients3:”，ingredients3）；
常量成分=IngCreditions1+“，+IngCreditions2+”，“+IngCreditions3；
const ingre1=成分。拆分（“，”）；
常数ingre=ingre1.过滤器（功能（tem）{
返回tem！==null&&tem！==undefined&&tem！==“”；
});
常量大陆=item.content1+”，“+item.content2+”，“+item.content3；
分数=0；
for（设i=0；i{
导航。导航（“解释”）；
}, []);
返回(
{item.User.昵称}
{item.name}
재료 {score1}%일치
配方
);
};
导出默认卡；

navigator.js

const MainNavigator=（）=>{
返回(
);
};

我不知道该怎么解决

请帮帮我

这是错误视图

这对我有用

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

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

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 /*}
  );
}