React Native styled-components引入颜色变量报backgroundColor无效prop错误

问题根因 #

colours.js文件中仅对外导出了Colours集合对象，你解构得到的primary、secondary等单个颜色变量没有做导出处理，因此default-styles.js中引入的所有颜色变量实际都是undefined，赋值给样式属性时触发类型不合法报错。

修复方案 #

任选以下一种方案即可：

• 方案1：修改colours.js，额外导出解构后的单个颜色变量
  在colours.js文件末尾添加如下代码：

export {
  primary,
  secondary,
  teritary,
  darkLight,
  brand,
  green,
  red
};

• 方案2：修改default-styles.js的导入逻辑
  将default-styles.js中颜色相关的导入代码替换为如下内容：

import { Colours } from './colours';
const {
  primary,
  secondary,
  teritary,
  darkLight,
  brand,
  green,
  red,
} = Colours;

修改完成后重新运行项目即可解决报错。

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