在React-Native中，是否有类似于SASS的将颜色hex代码存储在变量中的方法？

Question

我在我的React Native项目中有一些颜色，想知道是否能够像使用SASS那样将这些颜色存储在变量中，命名并保存在单独的文件中。下面是一些输入字段的样式示例。

module.exports = StyleSheet.create({
  textInput:{
    backgroundColor: '#fff',
    color: '#666',
    height: 60,
    marginBottom: 20,
    marginLeft: 20,
    marginRight: 20,
    paddingLeft: 10,
    paddingRight: 10,
  }
});

我想知道是否可以做类似于这个（SASS）的事情： $cornflower-blue: #6195ED;（与其他颜色变量在单独的文件中）

article {
  background-color: $cornflower-blue;
}

感谢您提前阅读。

谢谢。

- Jess Madeline

Answer 1

你可以在JavaScript中直接使用变量。

colors.js

export const cornFlowerBlue = '#6195ED';

当你想要使用它时

import {cornFlowerBlue} from './colors';
...
module.exports = StyleSheet.create({
  article {
    backgroundColor: cornFlowerBlue,
  }
});

编辑：$cornflower-blue这个名称无法使用，因为-被保留用于减法运算。

- Daniel Basedow

Answer 2

我可以向您推荐react-native-extended-stylesheet，它支持像SASS一样的全局和局部变量：

// app entry: set global variables
EStyleSheet.build({
  textColor: '#0275d8'
});

// component: use global variables
const styles = EStyleSheet.create({
  text: {
    color: '$textColor'
  }
});

- vitalets

Answer 3

我使用一个设置文件，在其中导入我的应用程序中的所有常量。

'use strict';

var settings = {
    siteURL: 'http://www.website.com',
    green: '#80bc5a',
    lightGreen: '#c0dead',
    lightGrey: '#f1efeb',
    darkGrey: '#54575a',
    brown: '#867f75',
};

var settings = require('./Settings')
module.exports = settings;

var { siteURL, green } = settings

- Jonathan Lockley