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;
}

提前致谢。

Answer 1

你可以在JavaScript中使用变量。

colors.js

export const cornFlowerBlue = '#6195ED';

当你想使用它时

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

编辑：$ cornflower-blue不能用作名称，因为-保留用于减法。

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'
  }
});

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

有没有办法在React-Native中将颜色十六进制代码存储在类似于SASS的变量中？

3 个答案: