如何为React Native Paper组件添加className与tw属性？

核心问题分析 #

你的类型声明逻辑本身没有错误，无效的原因大概率是自定义类型文件未被TypeScript正确加载，或者React Native Paper的组件Props继承链导致直接扩展FABProps未生效。

分步解决方案 #

1. 规范类型文件结构 #

将自定义类型声明文件放在项目的src/types目录下，命名为react-native-paper.d.ts，确保TypeScript能扫描到该文件。

2. 配置tsconfig.json #

修改项目根目录的tsconfig.json，让TypeScript识别自定义类型文件：

{
  "compilerOptions": {
    "typeRoots": ["./src/types", "./node_modules/@types"],
    "baseUrl": "."
  },
  "include": ["src/**/*", "src/types/**/*"],
  "exclude": ["node_modules"]
}

3. 修正类型声明代码 #

提供两种可行的声明方式，按需选择：

方式一：直接扩展FABProps

针对FAB组件单独添加属性：

import "react-native-paper";

declare module "react-native-paper" {
  interface FABProps {
    className?: string;
    tw?: string;
  }
}

方式二：扩展基础Props（推荐）

由于FABProps继承自TouchableRippleProps，扩展该基础接口可让所有同类组件（如Button、TouchableRipple）都支持className/tw：

import "react-native-paper";

declare module "react-native-paper" {
  interface TouchableRippleProps {
    className?: string;
    tw?: string;
  }
}

4. 刷新TypeScript服务 #

在VSCode中按下Ctrl+Shift+P，选择「TypeScript: Restart TS Server」，确保类型更改立即生效。

5. 验证使用效果 #

现在可以直接给FAB组件添加className或tw属性：

import { FAB } from "react-native-paper";

// 使用示例
<FAB
  icon="plus"
  onPress={() => {}}
  tw="bg-blue-500"
  className="absolute bottom-5 right-5"
/>

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