Question

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

SomeAttribute

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

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

希望有帮助。

Answer 3

您可以定义一个单独的 js 文件 colors.js，该文件包含颜色对象并将其导出。并且在任何地方都可以轻松使用。只需 从 './/colors.js' 导入 {MyColor}

export const MyColor = {
  white: '#fff',
  mybackground: '#222264',
  // your colors
}

Answer 4

我们将一个文件用于这样的颜色/字体：export const colors = { myColor: '#fffffff' }

并导入：import { colorStyles } from '../../libs/styleHelpers'; 并使用：colorStyles.myColor

Answer 5

创建具有恒定颜色的文件：

const Colors = {
  gray: '#606060',
  white: '#FFFFFF',
  ...
};

export default Colors;

并像这样使用：

import Colors from '../../../Constants/Colors';

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.white,
  },
});

将颜色变量导入我的样式

5 个答案: