反应本机样式优先

Question

这个问题是关于在react组件上使用数组arg作为样式道具的： style={[styles.localTextStyle, textStyle...]}

据我了解，优先级是从最后一个元素到第一个元素。因此，在上面的示例中，textStyle将覆盖styles.localTextStyle。很好，但是，我正在制作一个自定义组件，我希望能够从父级中指定内嵌道具，并且使内联具有最高优先级，但是如果没有提供道具，则不覆盖以前的样式。

例如，如果我正在编写一个名为Text的自定义组件：

<Text style={[styles.localTextStyle, textStyle, {
      color: color
}]}>

我将使用localTextStyle作为默认值，然后从称为textStyle的父级传递样式，最后使用名为color的道具设置颜色。这仅在定义了道具color时有效，否则，尽管可能已在color中设置了较早的样式，但它将覆盖textStyle以取消设置。

所以我想知道避免这种情况的最佳方法是什么。我目前将最后一个arg封装在一个名为Clean的函数中，该函数返回仅定义了键值的新对象。那行得通，但它会使代码混乱，如果有人没有更聪明，更好的方法，我会感到震惊。

<Text style={[styles.localTextStyle, textStyle, Clean({
      color: color
})]}>

Answer 1

它写在Documentation内：

您还可以传递样式数组-数组中的最后一个样式优先，因此您可以使用它来继承样式。

然后我检查了一下，就像这样：

[组件样式] <[内部数组] <[外部数组]

像这样：

• TSButton的声明中具有自己的样式

<TSButton style={[Style.button,{padding:0,width:50,height:20}]} />

所以这里的优先级是>>

TSButton Styling < Style.button < padding , width, ...