React Native+TypeScript实现组件颜色属性类型校验方案

直接用React Native内置的ColorValue类型就能解决这个问题，它已经帮我们定义了所有合法的颜色值类型，完全适配你的需求。

具体实现步骤 #

1. 从react-native中导入ColorValue类型
2. 将组件的color属性类型指定为ColorValue

修改后的代码如下：

import { ColorValue, Text } from 'react-native';

// 补充children的类型定义（组件中用到了该属性）
const TextBody = ({
  color,
  children
}: {
  color: ColorValue;
  children: React.ReactNode;
}) => {
  return (
    <Text
      style={[
        generalStyles,
        textTransformStyle,
        textAlignStyle,
        selfAlignmentStyle,
        typography?.body,
        // 将color属性应用到文本样式
        color ? { color } : {},
      ]}
    >
      {children}
    </Text>
  );
};

export { TextBody };

为什么用ColorValue？ #

ColorValue类型已经覆盖了你列出的所有合法场景：

• 预定义颜色字符串："red"、"blue"等
• 十六进制颜色："#21292F"、"#fff"等
• RGB/RGBA函数或字符串：rgba(12,2,1,0)、"rgb(0,0,0)"等
• HSL/HSLA格式："hsl(0, 100%, 50%)"等

同时，当传入非法值（比如数字5252）时，TypeScript会直接抛出类型错误，完全符合你的要求。

额外说明 #

如果业务需要更严格的颜色限制（比如只允许十六进制颜色或特定主题色），可以基于ColorValue扩展自定义类型，示例：

// 仅允许十六进制颜色或指定主题色
type CustomColor = `#${string}` | "primary" | "secondary";

但绝大多数场景下，内置的ColorValue已经足够满足需求，无需额外自定义。

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