将颜色变量导入我的样式

Question

我想用我的颜色变量创建文件,然后将此文件导入我的样式.

button: {
 color: primarycolor
 background: primarybackground
}

所以我只能在一个地方改变颜色.

Answer 1

您可以定义一个单独的js文件,该文件由colors对象组成并导出它.

const COLORS = {
  white: '#fff',
  black: '#000',
  // your colors
}

export default COLORS;

现在从您使用定义颜色的相应文件中的上述文件中导入颜色.并使用它如下所示.

button: {
  color: COLORS.white,
  backgroundColor: COLORS.black
}

Answer 2

有点晚了。但是一个完整的例子。创建一个常量，如

const Colors {
  tabIconDefault: '#959292',
  tabIconSelected: tintColor,
  tabBar: '#fefefe',
  errorBackground: 'red',
  errorText: '#fff',
  warningBackground: '#EAEB5E',
  warningText: '#666804',
  noticeBackground: tintColor,
  noticeText: '#fff'
};
module.exports = Colors ;

要在任何地方使用，请像这样导入

const Colors = '../constants/Colors';

现在使用它就像

color: Colors.warningBackground

希望有帮助。