React Native TS项目引入styled-components/native找不到声明文件如何解决

在React Native项目中引入styled-components时，该库提供了适配原生组件的专属入口，常规导入写法如下：

import styled from 'styled-components/native';

export const Container = styled.View`
  // 自定义样式
  ...
`;

如果是在TypeScript开发的React Native项目中使用上述写法，控制台会抛出如下类型错误：

Could not find a declaration file for module 'styled-components/native'.

这类第三方库模块类型缺失的问题，常规解决思路是安装对应的@types类型包到开发依赖，也就是执行安装@types/styled-components的命令，但这个操作并不能解决当前这个特定报错。

正确修复方案 #

这个报错的核心原因是@types/styled-components只包含了Web端的类型定义，React Native端的类型定义在单独的类型包里，需要额外安装：

• 先安装基础依赖（如果已经装过可以跳过）

  # npm 使用者执行
  npm install styled-components
  # yarn 使用者执行
  yarn add styled-components
  

• 安装完整的类型依赖到开发环境

  # npm 使用者执行
  npm install @types/styled-components @types/styled-components-react-native -D
  # yarn 使用者执行
  yarn add @types/styled-components @types/styled-components-react-native -D
  

• 重启TypeScript服务即可消除报错。如果使用VSCode开发，可以通过快捷键Ctrl+Shift+P（Mac系统为Cmd+Shift+P）调出命令面板，选择TypeScript: Restart TS Server等待服务重启完成，不需要重启整个编辑器。

如果执行完上述步骤报错依然存在，可以检查项目根目录的tsconfig.json文件，在compilerOptions.types数组中手动加入React Native端的类型包引用：

{
  "compilerOptions": {
    "types": ["styled-components-react-native"]
  }
}

保存配置后再次重启TS服务即可。

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