React Native에서 동적 배경색이있는 버튼 만들기

Question

Touchable 요소를 감싸고 Replay Native 구성 요소를 만들고 테마 색상을 소품으로 사용합니다. 테마에 따라 단추 배경색이 달라집니다. 지금 나는 소품을 검사하고 그에 따라 스타일을 선택하는 렌더링 함수에 if 문을 가지고 있습니다.

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> 

) 
}