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

Question

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

const primaryColor = this.props.theme;

const styles = {
  backgroundColor: primaryColor
}

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

这是我的 Theme.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',
  },

};

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