用作样式属性值的 Redux 状态值

Question

我正在使用redux来存储十六进制颜色值，例如(#000000(。我有很多按钮调度一个动作，这是按钮颜色的值(红色按钮调度红色(我的组件现在可以访问状态，但是当我使用该状态来设置背景颜色的样式时，我收到一个未定义的错误！我的组件确实在文本标签中呈现该值，因此我知道它返回了正确的十六进制值。我唯一能想到的可能是因为它不是字符串包装器？我尝试这样做：

const primaryColor = this.props.theme;
const styles = {
  backgroundColor: primaryColor
}

我收到错误：无法读取未定义的属性"主题">

这是我的主题.js文件：

class Themes extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.theme}</Text>
        <Button onPress={() => 
this.props.themeColorValue('#3498db')}>Blue</Button>
        <Button onPress={() => 
this.props.themeColorValue('#e67e22')}>Orange</Button>
        <Button onPress={() => 
this.props.themeColorValue('#9b59b6')}>Purple</Button>
      </View>
   );
  }
}
const primaryColor = this.props.theme;
const styles = {
  container: {
    backgroundColor: primaryColor,
    flex: 1,
    paddingHorizontal: 10,
    paddingVertical: 10,
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
};

function mapStateToProps(state) {
  return {
    theme: state.themeColorValue,
  };
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ themeColorValue: themeColorValue }, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(Themes);

感谢任何可以帮助我解决这个问题的人，干杯。

Answer 1

const primaryColor = this.props.theme;
const styles = {
  container: {
    backgroundColor: primaryColor,
    flex: 1,
    paddingHorizontal: 10,
    paddingVertical: 10,
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
};

将此部分移动到渲染函数的开头，然后您的代码应该可以工作。