将带navigation.navigate的onPress传给自定义组件报undefined错误如何解决

核心错误点1：自定义组件内回调函数未正确执行 #

你当前在CardCus组件内的调用写法存在语法错误，没有真正触发传入的onPressed回调：

// 错误写法，仅引用了函数未执行，语法也不完整
<TouchableWithoutFeedback onPress={() => onPressed}

直接修正为以下两种写法任意一种即可：

// 写法1：直接传递回调（无额外逻辑时推荐）
<TouchableWithoutFeedback onPress={onPressed}>

// 写法2：箭头函数包裹，可添加自定义逻辑
<TouchableWithoutFeedback onPress={() => onPressed()}>

核心错误点2：自定义组件未正确接收prop #

需确保CardCus组件显式接收了传入的onPressed属性，示例如下：

// 正确接收prop示例
const CardCus = ({ title, user, itemimage, onPressed }) => {
  // 组件内部逻辑
  return (
    // 组件渲染内容
  )
}

可选兜底方案（修正后仍报错时使用） #

如果调整后仍报navigation相关错误，可在主页面用useNavigation hook显式获取导航实例，避免闭包导致的作用域丢失：

import { useNavigation } from '@react-navigation/native';

// 主组件内部开头调用
const navigation = useNavigation();

// 原跳转函数保持不变即可
const clickedItem = (data) => {
  navigation.navigate('articledetail', { data: data })
}

你原来给CardCus传参的onPressed={() => clickedItem(item)}写法没有问题，无需修改。

内容的提问来源于stack exchange，提问作者Ibtsam Ahmad