如何在 React Native 中继承 StyleSheet.create 内的样式（可能使用解构语法）

Question

我想在 StyleSheet.create 的参数对象中重用样式，怎么办？

见代码：

const styles = StyleSheet.create({
  style1: {
    color: "red",
    backgroundColor: "white"
  },
  style2: {
    width: 100,
    ...style1
  }
})

本来我想style2继承style1的所有color和backgroundColor，再扩展1个属性叫width .所以我确实尝试了上面的代码，但是它得到了一个错误"style1 is not declared"。我意识到了这个问题，所以我用 ...this.style1 替换了 ...style1，错误消失了，但它没有像我预期的那样工作。我想知道为什么并尝试运行 javascript 中的这个片段来测试行为：

styles = {
  style1: {
    color: "red",
    backgroundColor: "white"
  },
  style2: {
    width: 100,
    inherit: this.style1
  }
}
console.log(styles.style2.inherit)

它弹出结果undefined，不是styles.style1。我再次意识到这个问题，将 inherit: this.style1 替换为 inherit: styles.style1 后，javascript 片段 有效，但不在 React Native 代码中。

我想到现在为止，你明白我想要什么，所以我的问题是我怎样才能实现它（在 React Native 中重用样式代码）？我认为会有很多解决方法，所以请尽可能多地给我。谢谢。

这是我尝试过但没有得到预期结果的语法列表（或者因为我的大脑工作不正常，我错了）：

...style1
...this.style1
...styles.style1
...StyleSheet.style1
...StyleSheet.flatten(styles.style1)

Answer 1

我知道 1 种解决方法是将 "reuseable" style1 对象放在 StyleSheet.create 之外：

const style1 = {
  color: "red",
  backgroundColor: "white"
}
const styles = StyleSheet.create({
  style2: {
    width: 100,
    ...style1
  }
})

有没有更好的方法？因为 style1 也可以是另一个元素使用的样式，所以我不能再使用 <Element style={styles.style1}/>...

Answer 2

不可能Self-references in object literals / initializers

解法：1

const baseStyle = {
  color: 'red',
  backgroundColor: 'white'
}

const styles = StyleSheet.create({
  style1: baseStyle,
  style2: {
    width: 100,
    ...baseStyle
  }
})

方案二使用 Styled Components 轻松管理和重用样式。

如何在 React Native 中继承 StyleSheet.create 内的样式（可能使用解构语法）

How to inherit style within StyleSheet.create in React Native (using destructuring syntax maybe)

javascript

ecmascript-6

react-native

react-native-stylesheet