Как различать два разных CSS-свойства, которые должны быть условно стилизованы, с одинаковыми именами в React Native?

У меня такой стиль: <TouchableOpacity style={[styles.container, { backgroundColor }]}> и этот корпус переключателя:

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

Это правильно изменит цвет фона компонента 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;
    }

Однако, если я смешаю оба варианта переключателя, это приведет к конфликту, потому что оба реквизита backgroundColor. Как этого избежать?


react-native css-modules
person Esteban Vargas    schedule 06.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Почему бы вам не попробовать классический способ создания предметов. Используйте два разных имени.

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}
person Lasitha    schedule 06.08.2018