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

3 回答

• 0

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

  回复于 2024-04-26T16:42:53+08:00
• 0

  我发现这个最简单的方法是这样的 . 首先，我有一个保存变量的文件

  /* 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
    }
  

  回复于 2024-04-26T16:42:53+08:00
• 0

  你可以这样试试

  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>
  

  回复于 2024-04-26T16:42:53+08:00