我无法将导致 NativeWind 道具无法在 tsx 中识别的原因放置

Question

我可以在 jsx 文件中调用 className，但不能在 tsx 文件中调用。有人可以帮忙吗。

抛出的错误是：

没有重载与此调用匹配。 重载第 1 个（共 2 个）“(props: ViewProps): View”，出现以下错误。 类型 '{ 子元素：元素[];类名：字符串； }' 不可分配给类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”。 类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”上不存在属性“className”。 重载 2 个（共 2 个）“(props: ViewProps, context: any): View”，出现以下错误。 类型 '{ 子元素：元素[];类名：字符串； }' 不可分配给类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”。 类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”上不存在属性“className”。ts(2769)

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

// This type checks TabIcons so that an incorrect type is not passed.
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: [],
};

Answer 1

创建一个名为nativewind-env.d.ts的根文件

在该文件内添加以下行

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

这将解决打字稿问题