Создание кнопки с динамическим цветом фона в React Native

Question

Я создал компонент React Native, который завершает элемент Touchable и принимает цвет темы в качестве опоры. Различные темы делают цвет фона кнопки другим. Сейчас у меня есть, если заявление в функции визуализации, которая проверяет пропеллер и выбирает стиль соответственно:

render() { 
    var bgColor; 
    if (this.props.theme === 'blue') { 
    bgColor = styles.blueBg; 
    } 
    else if (this.props.theme === 'red') { 
    bgColor = styles.redBg; 
    } 

    // (...) 

    return (
    <TouchableHighlight style={[styles.button, bgColor]}> 
    {/* ... */} 
    </TouchableHighlight> 
); 
} 

const styles = StyleSheet.create({ 
    // ... 
    blueBg: { 
    backgroundColor = 'blue' 
    }, 
    redBg: { 
    backgroundColor = 'red' 
    }, 
}); 

Является ли это правильный способ сделать это? Должен ли я переместить мои инструкции if в другое место? Есть ли другой подход к этому?

Answer 1

Rather than doing this what about : 

super(props); 
this.state = {bgColor : (this.props.theme === 'blue')? styles.blueBg : styles.redBg}; 

render(){ 
return (
<TouchableHighlight style={[styles.button,this.state.bgColor]}> 
    {/* ... */} 
    </TouchableHighlight> 

) 
}