Question

我创建了一个React Native组件，它包装了一个Touchable元素，并将主题颜色作为道具。不同的主题使按钮背景颜色不同。现在我在render函数中有一个if语句，它检查prop并相应地选择样式：

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>

)
}

在React Native中制作具有动态背景颜色的按钮

1 个答案: