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

StyleSheet - 在React Native中扩展样式值

1 个答案: