React Native中StyleSheet如何复用已有样式？避免重复编写代码

当然可以实现样式复用啦！你不用重复编写相同的样式代码，也不用在组件里堆砌多个样式类，这里有几种实用的方法帮你在StyleSheet.create里直接复用已定义的样式：

1. 先抽离基础样式，再用对象展开运算符复用 #

因为StyleSheet.create内部的各个样式属性是并行创建的，没法直接引用同一个styles对象里的其他属性，所以我们可以先把要复用的样式单独定义成变量，再用对象展开运算符（...）把它合并到新样式中：

// 先定义可复用的基础样式变量
const mainColorStyle = { color: '#FFFFFF' };

const styles = StyleSheet.create({ 
  content: { alignItems: 'center', flex: 1, justifyContent: 'center' }, 
  // 把基础样式也加入styles，方便组件单独使用
  mainColor: mainColorStyle, 
  // 复用mainColorStyle，还能添加额外样式
  usernameIcon: { 
    ...mainColorStyle,
    fontSize: 18, // 可以在这里补充专属样式
  }, 
  usernameItem: { 
    backgroundColor: '#FF8484', 
    borderColor: '#FFFFFF', 
    paddingTop: 7,
    ...mainColorStyle // 同样复用文字颜色样式
  }, 
});

2. 使用StyleSheet.flatten合并样式 #

如果需要合并多个样式对象，React Native提供的StyleSheet.flatten方法会很实用，它能把多个样式对象合并成一个：

const mainColorStyle = { color: '#FFFFFF' };
const paddingStyle = { paddingVertical: 8, paddingHorizontal: 12 };

const styles = StyleSheet.create({ 
  content: { alignItems: 'center', flex: 1, justifyContent: 'center' }, 
  // 合并多个基础样式
  styledButton: StyleSheet.flatten([
    mainColorStyle,
    paddingStyle,
    { backgroundColor: '#FF8484', borderRadius: 4 }
  ]), 
});

为什么你原来的写法不行？ #

你之前尝试的{this.styles.mainColor}有两个问题：

• 语法错误：不能在对象字面量里嵌套另一个对象的引用，正确的方式是用展开运算符或者合并方法；
• 时机问题：在StyleSheet.create执行时，styles变量还没完成赋值，所以内部无法引用styles.mainColor。

这样处理后，你就能在定义样式时直接复用代码，组件里只需要引用合并后的单个样式类就可以啦！

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