嗨,我正在使用react-native和react-navigation

杰克·沃尔滕

当我尝试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 && tem !== undefined && 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 /*}
  );
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

重置主屏幕的导航堆栈(React Navigation和React Native)

React Native Firebase启动器和React Navigation

React-native 启动画面和 react-navigation

React Native,React-Navigation

React Native Navigation-底部标签和抽屉

@react-navigation/stack 和 @react-navigation/native-stack 有什么区别?

React native无法链接react-navigation和native-base-(Expo-CRNA Project)

使用React-Navigation和Redux的React Native-如何实现全局可用的“注销”按钮

在react-native项目中无法使用react-navigation和typescript进行导航

我如何在React Native中制作面包屑/显示屏幕路径(我正在使用React Navigation v5)

React Native:设置 React Navigation 的屏幕标题

React Native Context API react-navigation

React Native 固定页脚与 React Navigation

React Native useEffect Hooks和React Navigation setParams在加载时不会更新

react-native与react-navigation和redux [跨屏幕传输状态]

React Native goBack() 与 TabNavigator 和 StackNavigator react-navigation v5

我的屏幕在模拟器和少数移动设备(Android)React-Native 中重叠。(@react-navigation/stack": "^5.10.0")

在 react-native 0.59.10 中使用 react-navigation

禁止使用react-navigation返回react-native

react native:使用 headerRight 导航时,react-navigation 崩溃

React Native-使用React Navigation动态创建导航器

使用嵌套的 react-navigation 来 React Native HOC

React Native - React Navigation 不能在 DrawerContent 中使用钩子

react-navigation-camera与react-navigation-stack和

React Native Navigation TopBar 图标未显示

等价于React Native Navigation的动态查询参数?

React Native Navigation:在屏幕之间传递数据

React Native Navigation:检查抽屉是否打开

React Native Navigation 不会显示初始组件