React Native中如何创建包含3种颜色类型的enum？

报错原因 #

TypeScript 枚举的每个成员仅支持绑定单个原始类型值，你直接给button_gradient_color赋值三个逗号分隔的字符串不符合语法规范，因此触发Enum member must have initializer报错。

实现方案 #

方案1：拆分三个独立枚举成员，匹配你现有调用习惯 #

如果要保留你代码中调用button_gradient_color1/2/3的写法，直接把三个渐变色拆成三个独立的枚举成员即可：

export enum Colors {
  background_color = '#000060',
  button_gradient_color1 = '#4c669f',
  button_gradient_color2 = '#3b5998',
  button_gradient_color3 = '#192f6a'
};

对应修改调用代码，注意colors属性需要传入数组，补全原代码缺失的方括号：

<LinearGradient
  colors={[Colors.button_gradient_color1, Colors.button_gradient_color2, Colors.button_gradient_color3]}
>

方案2：将渐变色组存为数组类型枚举值（更适合渐变场景） #

把三个渐变色打包成数组作为单个枚举值，调用时无需拆分写三个变量，代码更简洁。因为枚举默认仅支持原始类型值，需要加类型断言绕开语法校验：

export enum Colors {
  background_color = '#000060',
  button_gradient_color = ['#4c669f', '#3b5998', '#192f6a'] as unknown as string
}

调用代码：

<LinearGradient
  colors={Colors.button_gradient_color as unknown as string[]}
>

更灵活的替代方案：用只读对象替代枚举 #

如果不需要枚举的强类型约束特性，用const只读对象存值更灵活，不需要额外类型断言就能直接存储数组：

export const Colors = {
  background_color: '#000060',
  button_gradient_color: ['#4c669f', '#3b5998', '#192f6a']
} as const;

调用代码最简单：

<LinearGradient
  colors={Colors.button_gradient_color}
>

注意：你原有调用代码中的colors属性值缺少数组方括号，LinearGradient的colors属性要求传入数组类型，不管选用哪种方案都需要补全该语法。

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