React Native Pressable组件报错：onPress is not a function

核心问题 #

你定义的Component组件错误地将单个参数作为props接收，但React组件的参数本质是一个props对象。当你通过<Component navigateTo={navigateToMyCoverScreen} />传递函数时，Component里的navigateTo实际上是整个props对象（即{ navigateTo: 你的导航函数 }），而非你传入的函数本身，导致Pressable的onPress属性拿到的不是函数，触发onPress is not a function报错。

修复方案 #

有两种方式修正组件的参数接收逻辑：

方式1：解构props对象

直接从props中解构出navigateTo属性：

const Component = ({ navigateTo }) => {
  return (
    <View style={styles.container}>
      <Pressable onPress={navigateTo}>
        {/* 补充Pressable的子元素与闭合标签 */}
      </Pressable>
    </View>
  );
};

方式2：通过props对象访问属性

保留props作为参数，通过.访问navigateTo属性：

const Component = (props) => {
  return (
    <View style={styles.container}>
      <Pressable onPress={props.navigateTo}>
        {/* 补充Pressable的子元素与闭合标签 */}
      </Pressable>
    </View>
  );
};

额外注意 #

确保你的Component组件中Pressable标签有正确的闭合，以及必要的子元素（比如文本、图标等），避免JSX语法错误。

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