React Native中如何在同一样式表内复用样式？

你可以通过ES6对象扩展运算符实现同一份StyleSheet内的样式复用，具体写法如下：

import { StyleSheet } from 'react-native';
import Colors from './your-colors-file-path'; // 替换为你的Colors文件路径

// 先定义独立的基础样式对象
const buttonDefault = {
  borderRadius: 8,
  padding: 15,
  height: 48,
  alignItems: 'center',
  justifyContent: 'center',
};

export const globalStyles = StyleSheet.create({
  buttonDefault, // 将基础样式纳入StyleSheet
  buttonContained: {
    ...buttonDefault, // 复用基础样式属性
    backgroundColor: Colors.primary,
  },
  buttonOutlined: {
    ...buttonDefault, // 复用基础样式属性
    borderColor: Colors.primary,
    borderWidth: 1,
  },
});

说明 #

• 用...扩展运算符把buttonDefault的所有样式属性复制到目标样式中，再添加各自独有的样式（比如背景色、边框）。
• 后续修改基础样式时，只需要调整buttonDefault里的属性，所有继承它的按钮样式会自动同步更新，无需逐个修改。

如果需要在组件层面灵活组合样式，也可以用数组方式合并：

// 组件内使用示例
<Button style={[globalStyles.buttonDefault, globalStyles.buttonContained]} title="确认" />

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