NativeWind className属性在TSX文件中不被识别的问题求助

错误信息 #

No overload matches this call.
Overload 1 of 2, '(props: ViewProps): View', gave the following error.
Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.ts(2769)

中文翻译：

没有匹配的重载调用。
重载1（共2个）：(props: ViewProps): View，报错如下：
类型 { children: Element[]; className: string; } 无法赋值给类型 IntrinsicAttributes & IntrinsicClassAttributes & Readonly<ViewProps>。
属性 className 不存在于类型 IntrinsicAttributes & IntrinsicClassAttributes & Readonly<ViewProps> 上。
重载2（共2个）：(props: ViewProps, context: any): View，报错如下：
类型 { children: Element[]; className: string; } 无法赋值给类型 IntrinsicAttributes & IntrinsicClassAttributes & Readonly<ViewProps>。
属性 className 不存在于类型 IntrinsicAttributes & IntrinsicClassAttributes & Readonly<ViewProps> 上。ts(2769)

我的TSX代码 #

import { Tabs, Redirect } from "expo-router";
import { icons } from "../../constants";

// 类型检查TabIcons，防止传入错误类型
interface TabIconProps {
    icon: ImageSourcePropType;
    color: string;
    name: string;
    focused: boolean;
}

const TabIcon: React.FC<TabIconProps> = ({ icon, color, name, focused }) => {
    return (
        <View className="flex items-center justify-center gap-2">
            <Image
                source={icon}
                resizeMode="contain"
                tintColor={color}
                className="w-6 h-6"
            />
            <Text
                className={`${focused ? "font-psemibold" : "font-pregular"} text-xs`}
                style={{ color: color }}
            >
                {name}
            </Text>
        </View>
    );
};

const TabsLayout = () => {
    return (
        <>
            <Tabs screenOptions={{ tabBarShowLable: false }}>
                <Tabs.Screen
                    name="home"
                    options={{
                        title: "Home",
                        headerShown: false,
                        tabBarIcon: ({ color, focused }) => (
                            <TabIcon
                                icon={icons.home}
                                color={color}
                                name={"Home"}
                                focused={focused}
                            />
                        ),
                    }}
                />
            </Tabs>
        </>
    );
};

export default TabsLayout;

我的tailwind.config文件内容 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{tsx,js,jsx,ts}", "./components/**/*.{tsx,js,jsx,ts}"],
  theme: {
    extend: {
      colors: {
        primary: "#161622",
        secondary: {
          DEFAULT: "#FF9C01",
          100: "#FF9001",
          200: "#FF8E01",
        },
        black: {
          DEFAULT: "#000",
          100: "#1E1E2D",
          200: "#232533",
        },
        gray: {
          100: "#CDCDE0",
        },
      },
      fontFamily: {
        pthin: ["Poppins-Thin", "sans-serif"],
        pextralight: ["Poppins-ExtraLight", "sans-serif"],
        plight: ["Poppins-Light", "sans-serif"],
        pregular: ["Poppins-Regular", "sans-serif"],
        pmedium: ["Poppins-Medium", "sans-serif"],
        psemibold: ["Poppins-SemiBold", "sans-serif"],
        pbold: ["Poppins-Bold", "sans-serif"],
        pextrabold: ["Poppins-ExtraBold", "sans-serif"],
        pblack: ["Poppins-Black", "sans-serif"],
      },
    },
  },
  plugins: [],
};

解决方案 #

核心原因 #

React Native原生组件（View、Image、Text等）本身不支持className属性，JSX无类型校验所以不会报错，但TSX的类型系统会严格检查属性合法性，因此抛出错误。你用了Tailwind语法，说明是依赖nativewind库实现的样式，需要让TypeScript识别该库扩展的className属性。

解决步骤 #

1. 确认nativewind安装状态
   如果还没安装，执行以下命令：

   npm install nativewind
   npm install --save-dev tailwindcss@3.3.2
   

2. 配置TypeScript类型声明
   在项目根目录创建app.d.ts（或index.d.ts）文件，添加：

   /// <reference types="nativewind/types" />
   

   这会让TS识别nativewind为RN组件扩展的className属性。

3. 检查Babel配置
   确保babel.config.js中配置了nativewind插件：

   module.exports = function (api) {
     api.cache(true);
     return {
       presets: ['babel-preset-expo'],
       plugins: ["nativewind/babel"],
     };
   };
   

4. 重启TS服务
   修改类型声明后，重启VS Code的TypeScript服务（快捷键Ctrl+Shift+P → 选择"TypeScript: Restart TS Server"），确保类型更新生效。

内容的提问来源于stack exchange，提问作者Raffle.ski