IT技术 - 如何将变量导出到单独的文件？react本机 - 吾爱随笔录

在我的项目中，我有带有全局样式的主文件，但我也在单个组件中使用了样式。尽管如此，我还是使用相同的变量将字体大小、颜色传递给元素。

我不是 React 专家，但我认为将变量移动到单独的文件以不重复代码会很好。我怎样才能以正确的方式做到这一点？

全局样式：

'use strict';

  let React = require('react-native');

  let {
    StyleSheet,
  } = React;

  let INIT_COLOR = "#fff";
  let INIT_FONT_SIZE = 16; 


  module.exports = StyleSheet.create({
    container: {
        backgroundColor: INIT_COLOR,
        fontSize: INIT_FONT_SIZE
    },
});

组件样式：

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

class ActionButton extends React.Component {

 render() {
   let INIT_COLOR = "#fff";
   let INIT_FONT_SIZE = 16;

  return (
    <View style={styles.buttonContainer}>
        <Button
          onPress={this.props.onPress}
        />
    </View>
   );
 }
}

const styles = StyleSheet.create({
    buttonContainer: {
      backgroundColor: INIT_COLOR,
      fontSize: INIT_FONT_SIZE
    }
   });

export default ActionButton;

import React from 'react'; import { View, StyleSheet, Button} from 'react-native'; import { colors, fonts } from 'theme/variables'; class ActionButton extends React.Component { render() { return ( <View style={styles.buttonContainer}> <Button onPress={this.props.onPress} /> </View> ); } } const styles = StyleSheet.create({ buttonContainer: { backgroundColor: colors.INIT_COLOR, fontSize: fonts.INIT_FONT_SIZE } }); export default ActionButton;