如何通过重用另一个对象的代码来制作 React Native Flexbox StyleSheet 对象

How to make a React Native Flexbox StyleSheet object by reusing code from another object

本文关键字：React Native Flexbox 对象 StyleSheet 代码 何通过 一个对象      更新时间：2023-09-26

在我的 React Native 项目中创建一个 StyleSheet 对象时，我经常想创建一个与另一个非常相似的属性对象，只需进行一两个更改。 过去，我只是复制对象并更改名称和一两个属性，但我一直认为必须有一个不涉及复制/粘贴的更好解决方案。 我想过扩展一个对象，但不确定如何在创建样式表的上下文中做到这一点。 我不知道我是否使用了正确的术语，所以我只用下面的代码来说明。

var styles = StyleSheet.create({
    titleText: {
        marginLeft: 8,
        marginTop: 0,
        marginBottom: 0,
        alignSelf: "left",
        color: "grey",
        fontSize: 15,
    },
    buttonText: {
        marginLeft: 8,
        marginTop: 0,
        marginBottom: 0,
        alignSelf: "left",
        color: "grey",
        fontSize: 20,
    },
});

在这个例子中，我想从titleText复制buttonText，但只需在将属性传递给StyleSheet.create（）语句的上下文中更改fontSize值。 有没有比像上面一样写出来更好的方法？ 我觉得必须有，因为众所周知，程序员讨厌重复代码。

我尝试使用不可变性助手做一些类似buttonText: update(titleText, {$merge: {fontSize: 20}})的事情，但这给出了"未定义更新"错误。

要记住的一件事是，传递的最后一个属性将是使用的属性。因此，您可以设置如下内容：

var styles = StyleSheet.create({
    titleText: {
        marginLeft: 8,
        marginTop: 0,
        marginBottom: 0,
        alignSelf: "left",
        color: "grey",
        fontSize: 15,
    },
    buttonText: {
        fontSize: 20,
    },
});

并像这样使用它：

<Text style={ [styles.titleText, styles.buttonText] } >....</Text>

这将继承 titleText 的所有样式，仅应用较大的字体大小。

Javascript有一个名为assign的对象继承方法，它是Object类的一部分。因此，由于StyleSheet.create只接收常规对象，因此您可以使用它。

let buttonDefaults = {
    marginLeft: 8,
    marginTop: 0,
    marginBottom: 0,
    alignSelf: "left",
    color: "grey",
    fontSize: 15,
}
let styles = StyleSheet.create({
    //titleText simply makes a copy, doesn't change it
    titleText: Object.assign(buttonDefaults, {}),
    //you could also do this and it would work, just not copy the object:
    //titleText: buttonDefaults,
    //buttonText copies the values, and can add new ones or overwrite
    buttonText: Object.assign(buttonDefaults, {
        paddingLeft: 5, //new value 
        fontSize: 20, //overwrite value
    }),
});

通过这种方式，您甚至可以在其他地方为整个应用程序制作默认样式表

相关文章：