React Native中配合style使用的三个点(...)具体含义是什么？

什么是...扩展运算符 #

你可以把它理解为拆包操作：专门用来把对象/数组里的内容全部拆出来，平铺到当前位置。

举个最简单的JS示例：

// 两个普通样式对象
const baseStyle = { width: 100, height: 50 }
const myStyle = { margin: 10, width: 200 }

// 用扩展运算符合并
const finalStyle = { ...baseStyle, ...myStyle }
// 最终得到的结果：{ width: 200, height: 50, margin: 10 }

这里有两个核心特点：

• 自动合并两个对象的所有属性
• 如果有重名属性，后面的会覆盖前面的，刚好满足「自定义样式覆盖默认样式」的需求

结合你的RN代码场景理解 #

你自定义的MashButton组件，本身已经内置了两套基础样式：

1. 动态背景色：按压时变灰，没按压时用你传入的color属性值
2. 固定基础样式styles.button：宽150、高50、内容水平居中

而{...props.style}的作用，就是给用户留自定义样式的口子：

• 如果你调用组件时没传style属性，这行代码相当于没写，完全不影响原有样式，比如你第一个MashButton就是这个情况
• 如果你调用组件时传了style，它就会把你传的样式全部拆出来，合并到最终样式里，还能自动覆盖前面的重名属性，比如你第二个MashButton传了style={{margin:10}}，最终按钮就会多出10的外边距，完全符合自定义需求

为什么不直接写props.style？ #

其实在你当前的示例里，因为RN的style属性本身支持数组格式，直接写props.style也能生效，但用扩展运算符的好处是：

• 如果你要修改传入样式里的某一个属性，直接在后面加即可，比如你想强制所有按钮的左外边距都是5，就可以写{...props.style, marginLeft:5}，不管用户传没传marginLeft，最终都会是5
• 兼容性更强，不会出现因为传入的style格式不对导致的报错

内容的提问来源于stack exchange，提问作者danistor_m