ReactJS应用多种内联样式

Question

假设我有以下样式:

const styles = StyleSheet.create({
padding: {
  padding: 10
},
margin: {
  margin: 10
}
});

我想将它们都应用到反应组件中？

Answer 1

虽然我为此做了一些研究,但答案并非明确,一个建议是:

<View style={Object.assign({}, styles.padding, styles.margin)}>
    ...
</View>

Object.assign()接受参数列表并合并它们,但是,如果你没有传递第一个空对象,它将覆盖第一个参数,所以如果你想让你的样式保持干净,你必须传递它.

然而,从反应0.27.2开始,我在尝试这样做时遇到了一个错误的错误.

进一步阅读揭示:

<View style={StyleSheet.flatten([styles.postHeader, styles.flowRight])}>
  ...
</View>

工作得很好,但是在我找到另一个片段之后,这非常冗长且不太直观.

<View style={[styles.postHeader, styles.flowRight]}>

对于所有意图和目的,这是我正在寻找的.

我只是想在这里分享这些知识,因为它看起来相当明显,但我找不到任何文档.