安装@types/styled-components-react-native后RN组件报TS2786错误

问题场景 #

• 技术栈：React Native Expo裸工作流 + TypeScript + styled-components
• 复现路径：
  1. 执行yarn add styled-components安装核心依赖
  2. 执行yarn add @types/styled-components-react-native安装TS类型包
• 异常表现：
  • 自定义styled组件可正常创建，应用运行、打包均无异常
  • View、Text、TouchableHighlight等所有React Native内置组件抛出TS2786报错，提示对应组件无法作为JSX组件使用，类型报错干扰正常开发
  • 不安装该类型包会导致项目热重载功能失效
  • 所有依赖、React Native版本均已更新至最新版本
• 根因说明：@types/styled-components-react-native会对React Native内置组件的类型做扩展合并，当TS服务未正确加载类型合并逻辑时，会误将内置组件识别为非合法JSX元素，该问题仅存在于类型检查层，不影响运行时逻辑。

解决方案 #

方案1：修正TS配置加载逻辑（优先推荐） #

在项目根目录的tsconfig.json中显式声明类型包引用，确保TS服务正确加载类型合并规则：

{
  "compilerOptions": {
    // 其余原有配置保持不变
    "types": ["@types/styled-components-react-native"]
  }
}

如果项目自定义了全局类型声明文件（通常为src/types/global.d.ts或项目根目录下的styled.d.ts），可在文件顶部添加三斜杠类型引用指令：

/// <reference types="@types/styled-components-react-native" />

配置完成后重启TS服务即可：VS Code用户可通过快捷键Ctrl/Cmd + Shift + P唤起命令面板，执行TypeScript: Restart TS Server命令。

方案2：安装兼容版本类型包 #

最新版@types/styled-components-react-native存在和最新版React Native类型定义的已知冲突，可降级到经过兼容验证的版本解决：

1. 卸载当前冲突版本：

yarn remove @types/styled-components-react-native

2. 安装兼容稳定版：

yarn add -D @types/styled-components-react-native@5.1.3

安装完成后重启TS服务即可消除报错，同时不会影响热重载功能。

方案3：临时类型补丁兜底 #

如果前两种方案未生效，可在全局类型声明文件中添加临时类型补丁，修复JSX元素类型识别逻辑：

import type { ViewProps, TextProps, TouchableHighlightProps } from 'react-native';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      View: ViewProps;
      Text: TextProps;
      TouchableHighlight: TouchableHighlightProps;
      // 其余报错的内置组件可按相同格式补充
    }
  }
}

提示：该方案为临时兜底方案，待后续类型包修复冲突后建议移除，优先使用前两种方案解决根因问题。

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