React Native中Pressable组件forwardRef类型错误解决问询

错误原因分析 #

1. 第一个错误：'Pressable'是值却被用作类型
   TypeScript中Pressable是组件实例（值），不能直接作为类型使用。改用typeof Pressable虽能消除此错误，但typeof Pressable是组件的构造函数类型，并非Pressable实例的ref类型，进而引发第二个类型不兼容问题。

2. 第二个错误：Type "View | null" is not assignable to type "ForwardRefExoticComponent<...>"
   Pressable组件接受的ref是其底层视图实例类型（通常为View | null），而你指定的泛型参数是组件构造函数类型，两者类型不匹配导致报错。

正确解决方案 #

使用TypeScript的React.ElementRef工具类型自动提取Pressable组件对应的ref实例类型，这是最可靠的适配方式：

import React from 'react';
import { Pressable, Text, PressableProps } from 'react-native';

// 自定义组件props，继承Pressable所有原生属性
type ItemProps = PressableProps & {
  // 在此添加你的自定义属性，比如 title: string
};

// 用ElementRef获取Pressable的正确ref类型
const Item = React.forwardRef<React.ElementRef<typeof Pressable>, ItemProps>((props, ref) => {
  return (
    <Pressable ref={ref} {...props}>
      <Text>Item 1</Text>
    </Pressable>
  );
});

关键说明 #

• React.ElementRef<typeof Pressable>会自动从Pressable的类型定义中提取正确的ref实例类型，无需手动指定，能适配不同React Native版本的类型差异。
• 让ItemProps继承PressableProps，可确保自定义组件支持Pressable的所有原生属性，同时兼容自定义属性。

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