React Native + TypeScript中Button组件调用重载不匹配问题

核心问题分析 #

1. Styled组件类型不匹配：你定义的Button是基于View的Styled组件，但组件接收的是RectButtonProps（包含onPress、underlayColor等RectButton专属属性），View不支持这些属性，导致类型报错。
2. 类型定义版本冲突：项目使用的react-native版本是0.71.7，但@types/react-native版本是0.63.40，两者版本差距过大，导致aspectRatio等样式属性的类型定义不兼容（新版本支持string类型，旧版本仅支持number）。

解决步骤 #

1. 修改Styled Button的基础组件 #

将样式文件中的styled.View改为styled(RectButton)，让Button组件继承RectButton的属性类型：

// styles.ts
import styled from "styled-components/native";
import { RectButton } from "react-native-gesture-handler";
import {RFValue} from 'react-native-responsive-fontsize'

export const Button = styled(RectButton)`
    width: ${RFValue(130)}px;
    height: ${RFValue(60)}px;
    border-radius: ${RFValue(5)}px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 16px;
    background-color: ${({theme}) => theme.COLORS.GRAY6};
`;

// 其余样式保持不变

2. 升级@types/react-native版本 #

卸载旧的类型定义，安装与当前react-native版本匹配的@types/react-native：

# npm
npm uninstall @types/react-native
npm install @types/react-native@0.71.7 --save-dev

# yarn
yarn remove @types/react-native
yarn add @types/react-native@0.71.7 --dev

3. 清理项目缓存（可选） #

执行以下命令清理Expo缓存，避免缓存导致的类型问题：

npx expo start --clear

验证修改 #

完成上述步骤后，重新编译项目，<Button {...rest}>的类型报错应该会消失。

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