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

Answer 2

你可以通过这样做来实现它：

<View style={styles.mainFooterCont(noFooter)}>
  <Text> Testing </Text>
</View>

在你的样式表中这样做：

mainFooterCont: noFooter => ({
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'flex-end',
   paddingBottom: noFooter ? 0 : 20,
   paddingTop: Metrics.ratio(noFooter ? 0 : 5),
   }),