react-native - ReactJS 应用多种内联样式

Question

假设我有以下风格:

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

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

Answer 1

虽然我为此做了一些研究，但答案并不是很清楚，一个建议是:

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

Object.assign() 获取参数列表并合并它们，但是，如果您不传递第一个空对象，它将覆盖第一个参数，因此如果您想保持样式干净，则必须传递它.

但是从 React 0.27.2 开始，我在尝试执行此操作时遇到了分配错误。

一些进一步的阅读揭示了:

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

工作得很好，但是这非常冗长而且不太直观，在我发现另一个片段之后:

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

无论出于何种意图和目的，这都是我所寻找的。

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