如何区分在 React Native 中具有相同名称的两个不同 CSS 属性以进行条件样式设置？

Question

我有这种风格：<TouchableOpacity style={[styles.container, { backgroundColor }]}> 和这种开关盒：

    let backgroundColor = "white";
    switch (this._getName()) {
        case "bot":
            backgroundColor = "#F6F9FC";
            break;
    }

当名称为 "bot" 时，可以正确更改 TouchableOpacity 组件的背景颜色。

在 TouchableOpacity 中，我有这个：当与这些开关案例混合时，它会根据特定状态正确更改圆圈的颜色：

    const { report } = this.props;
    let backgroundColor = "gray";
    switch (report.status) {
        case "active":
            backgroundColor = "green";
            break;
        case "inQueueForMaintenance":
            backgroundColor = "yellow";
            break;
        case "inMaintenance":
            backgroundColor = "yellow";
            break;
        case "defeated":
            backgroundColor = "red";
            break;
    }

但是，如果我混合使用两个 switch case，就会发生冲突，因为两个 props 都是 backgroundColor。如何避免这种情况？

Answer 1

你为什么不试试经典的创建对象的方法。使用两个不同的名称。

let firstBg = "white";
switch (this._getName()) {
    case "bot":
        firstBg = "#F6F9FC";
        break;
}

{ backgroundColor: firstBg }

然后，

const { report } = this.props;
let secondBg = "gray";
switch (report.status) {
    case "active":
        secondBg = "green";
        break;
    case "inQueueForMaintenance":
        secondBg = "yellow";
        break;
    case "inMaintenance":
        secondBg = "yellow";
        break;
    case "defeated":
        secondBg = "red";
        break;
}

{ backgroundColor: secondBg}

如何区分在 React Native 中具有相同名称的两个不同 CSS 属性以进行条件样式设置？

How to differentiate two different CSS props to be conditionally styled, that have the same name in React Native?

react-native

css-modules