React Native中Styled Components无法被TypeScript识别类型问题

我用React Native结合Styled Components写了一个组件，但TypeScript完全无法识别Styled组件的Props，也不做类型检查：

import { FC } from "react";
import { View, LayoutChangeEvent } from "react-native";
import styled from "styled-components/native";

export const Test: FC = () => {
  return (
    <>
      <StyledView onLayout={(event) => null}></StyledView>
      <View onLayout={(event) => null}></View>
    </>
  );
};

const StyledView = styled.View`
  width: 100%;
`;

具体问题：

• StyledView的onLayout属性类型被识别为(property) onLayout: (event: any) => null，未正确推断出LayoutChangeEvent类型
• 原生View的onLayout则正常显示为(property) onLayout?: ((event: LayoutChangeEvent) => void) | undefined
• StyledView的类型提示为const StyledView: StyledComponent<typeof View, DefaultTheme, {}, never>，未继承原生View的Props类型

解决办法 #

1. 确认styled-components版本与类型支持 #

确保使用styled-components v5.1.0+，该版本开始内置完整的TypeScript类型支持，无需单独安装@types/styled-components-native这类第三方类型包。版本较低的话直接升级到最新稳定版：

npm install styled-components@latest
# 或
yarn add styled-components@latest

2. 检查tsconfig.json配置 #

确保tsconfig.json包含以下关键配置，让TypeScript正确识别React Native和styled-components的类型：

{
  "compilerOptions": {
    "jsx": "react-native",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true // 开启严格模式强化类型检查
  },
  "include": [
    "src/**/*",
    "node_modules/@types/styled-components-native/index.d.ts" // 按需添加
  ]
}

3. 显式指定Styled组件的Props类型 #

如果自动推断失效，手动为Styled组件指定Props类型，继承原生组件的Props：

import { View, ViewProps } from "react-native";

// 显式让StyledView继承View的所有Props
const StyledView = styled.View<ViewProps>`
  width: 100%;
`;

这样TypeScript就能正确识别onLayout等原生View的Props类型，提供完整的类型提示和检查。

4. 清除缓存并重启TypeScript服务 #

TypeScript缓存可能导致类型推断异常，尝试：

• 重启IDE（如VS Code）
• 运行缓存清理命令：

npx tsc --clearCache

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