css - StyleSheet - 在 React Native 中扩展样式值

Question

是否存在某种方法可以做这样的事情？

const styles = StyleSheet.create({
  content: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center'
  },
  mainColor: { color: '#FFFFFF' },
  usernameIcon: {
    {this.styles.mainColor} // <-- How import the style, instead does write the code - color: '#FFFFFF'?
  },
  usernameItem: {
    backgroundColor: '#FF8484',
    borderColor: '#FFFFFF',
    paddingTop: 7
  },
});

在我的组件中添加许多类，这非常冗长，我可能会像上面的代码那样做一些事情。

Answer 1

React Native 中没有样式继承语法(如 CSS 预处理器的语法)。

但是因为它都是 JS，所以你可以用 JS 来完成:

const MAIN_COLOR = 'white';

const someStyle = {
  padding: 5,
  margin: 5,
}

const styles = StyleSheet.create({
  usernameIcon: {
    color: MAIN_COLOR,
    ...someStyle,
  },
  generalStyle: {
    backgroundColor: 'white',
  }
})

// you can also combine styles in the component
// note that the latter style will override duplicated styles
<View style={[styles.usernameIcon, styles.generalStyle]} />