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

Answer 2

你可以这样尝试

    var {
        StyleSheet
      } = React;

    var styles = StyleSheet.create({
          oneAndTwo: {
        padding: 5,
        backgroundColor: 'green'
    },
    one: {
        justifyContent: 'flex-start'
    },
       oneAndTwoText:{
        backgroundColor: 'green'
      }
      });

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

Answer 3

在 JavaScript 中，您应该使用

Object.assign()

来合并对象。 示例：

        let justifyContent = {justifyContent: 'flex-start'};
        let alignItems = {alignItems: 'center'};
        let flex = {flex: 1};
        let backGroundColor = {backgroundColor: 'white'}

        let myStyle = Object.assign(justifyContent, alignItems, flex, backGroundColor)
        console.log(log_sign_data, myStyle)

结果：

 myStyle = {justifyContent: "flex-start", alignItems: "center", flex: 1, backgroundColor: "white"}

Answer 4

看起来简单的解构会起作用

 const buttonStyles = StyleSheet.create({
  primary: {
     paddingTop: 10,
     paddingBottom: 10,
     borderRadius: 10,
     borderWidth: 2,
     borderColor: 'brown',
     fontSize: 14,
     textAlign: 'center'
  },
  filled: { backgroundColor: 'brown', color: '#c1c1c1' },
  outlined: { backgroundColor: 'transpapent' },
  halfSize: { flex: 1 },
  fullSize: { width: '100%' }
  });

只是不要忘记双括号

<Pressable style={{ ...buttonStyles.primary, ...buttonStyles.halfSize }}><Text>Choose Image</Text></Pressable>