Question

我刚刚开始使用react-native而我正在摆弄样式。我想使用我在使用Sass时经常做的事情，并且创建一个包含可以在整个Sass文件中使用的变量的全局配置文件。在萨斯，我会做以下事情：

style.scss

@import 'config/_config';
@import 'base/_base';

然后在_config.scss中我会添加类似$fontColor: 'red';的内容，然后在_base.scss中添加如下内容：

p{
  color: $fontColor
}

当我将sass文件编译为单个css时，我得到了预期的

p{
  color: 'red';
}

现在我在反应本机中尝试相同，但我无法让它工作。最接近我得到'结果'（意思是：没有错误，但也没有结果）是：

我的文件 App.js 包含以下内容

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>My first app</Text>
      </View>
    );
  }
}

const styles = require('./style/Style.js');

style / Style.js 看起来像这样

import React from 'react';
import { StyleSheet } from 'react-native';

import s from './config/Variables.js';

module.exports = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: s.backColor,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

和 style / config / Variables.js 类似

import { StyleSheet } from 'react-native';

const backColor = '#4F5B66';

我也试过const styles = { backColor: '#4F5B66'};，但这也不起作用。

我怎样才能做到这一点？

Answer 1

我通过定义没有const的变量来解决它，因此Variables.js变为

import { StyleSheet } from 'react-native';

backColor = '#4F5B66';

使用和访问样式变量in native native

1 个答案: