react-native - 在 React Native 样式表中，如何将多个样式组合在一起

Question

如果可能的话，我想在 React Native 中将共享样式组合在一起，就像在 CSS 样式表中那样。

.one, .two {
    padding: 5px;
    background-color: green;
}

目前，我的 React Native 样式表看起来像..

module.exports = {
    "one": {
        justifyContent: 'flex-start',
        padding: 5,
        backgroundColor: 'green'
    },
    "two": {
        justifyContent: 'flex-end',
        padding: 5,
        backgroundColor: 'green'
    }
}

我当然可以为一个元素添加多种样式..

module.exports = {
    "oneAndTwo": {
        padding: 5,
        backgroundColor: 'green'
    },
    "one": {
        justifyContent: 'flex-start'
    },
    "two": {
        justifyContent: 'flex-end'
    }
}

<View style={[styles.oneAndTwo, styles.one]}>
    <Text style={styles.oneAndTwoText}>One</Text>
</View>
<View style={[styles.oneAndTwo, styles.two]}>
    <Text style={styles.oneAndTwoText}>Two</Text>
</View>

..但我想看看它是否可以通过 CSS 方式实现。

编辑 - 感谢到目前为止的样式管理建议。随着我对 React Native 的深入了解，我会在周末试用它们，并在我有机会理解和应用它们后回复。

看起来没有任何简单的方法可以像在 css 中一样设置多个样式“类”的样式，所以我会尝试其他想法。

Answer 1

我发现最简单的方法就是这样。首先，我有一个包含我的变量的文件

/* styles/variables.js */
const styleVariables = {

  // Fonts
  baseFontSize: 16,
  largeFontSize: 24,

  // Icons
  smallIconSize: 24,
  mediumIconSize: 36,

  // Colors
  mainColor: '#e85e45',
  secondaryColor: '#a0c5d8',
  offWhite: '#f4f4f4',
  darkColor: '#404040',

  // Dimensions
  headerHeight: 70,
  shadowSize: 6
};
export default styleVariables;

并且我在相关信息分组的其他样式文件中引用我的变量:

/* styles/presentation.js */
import variables from './variables';

export const shadow = {
  shadowColor: variables.darkColor,
  shadowRadius: variables.shadowSize,
  shadowOpacity: 0.35,
  shadowOffset: {width: 0, height: 0}
};

export const centered = {
  alignItems: 'center'
  justifyContent: 'center'
}

export const button = {
    width: variables.buttonSize,
    height: variables.buttonSize,
    borderRadius: variables.buttonSize / 2,
}

然后在我的组件中我可以组合这些样式:

import variables from './../styles/variables';
import {centered, shadow, button} from './../styles/presentation';

class RoundButton extends React.PureComponent {

  render() {
    return (
        <View style={styles.button}>
          {this.props.children}          
        </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    ...button,
    ...centered,
    ...shadow
  }