universal-decorator-style

universal-decorator-style

组件装饰器，合并默认样式和自定义样式

导入

import style from 'universal-decorator-style';

代码演示

简单值

import style from 'universal-decorator-style';
 
@style({ // 默认样式集合
  app: { width: 750 },
  body: { backgroundColor: '#fff' },
  footer: { height: 80 },
})
class App extends Component {
  static displayName = 'App';
  
  render() {
    // 1.合并后的样式存放在this.styles下
    // 2.如果默认样式和自定义样式中的某条规则有冲突，相应的自定义样式规则会覆盖默认样式规则
    const { styles } = this;
    
    return (
      <View style={styles.app}>
        <View style={styles.body}></View>
        <View style={styles.footer}></View>
      </View>
    );
  }
}
 
render(
  <App 
    styles={{ // 自定义样式集合
      app: { display: 'flex' },
      body: { backgroundColor: '#ccc' }
    }}
  />
);

函数

import style from 'universal-decorator-style';
 
@style({
  app: { width: 750 },
  body: {
    backgroundColor: (props, state) => props.GRAY // 此处backgroundColor的值为函数，分别接受props和state作为参数
  },
  footer: {
    height: (props, state) => state.footerHeight // 此处height的值为函数，分别接受props和state作为参数
  }
})
class App extends Component {
  static displayName = 'App';
 
  state = {
    footerHeight: 80,
  };
 
  render() {
    const { styles } = this;
    
    return (
      <View style={styles.app}>
        <View style={styles.body}></View>
        <View style={styles.footer}></View>
      </View>
    );
  }
}
 
render(<App GRAY={'#ccc'} />);