3

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

见代码：

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

最初，我想style2继承 allcolor和backgroundColorfrom style1，并扩展 1 个名为width. 所以我确实尝试了上面的代码，但随后出现错误“未声明 style1”。我意识到了问题，所以我替换...style1为...this.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)
4

2 回答 2

6

对象字面量/初始化器中的自引用是不可能的

解决方案：1

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

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

解决方案 2 使用Styled Components轻松管理和重用样式。

于 2019-10-02T08:01:35.527 回答
0

我知道一种解决方法是将“可重用”style1对象放在StyleSheet.create：

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

有没有更好的办法？因为style1也可以是其他元素使用的样式，所以不能再使用<Element style={styles.style1}/>了……

于 2019-10-02T07:52:37.723 回答