Question

我正在创建一个加密应用程序，我想在价格下降时将背景颜色更改为红色，在价格上涨时将背景颜色更改为绿色，然后在2秒后使用setTimeout将背景恢复为正常。

我尝试了至少两种方法来更改backgroundColor，但两次都出现以下错误

您试图将键backgroundColor设置为值＃ffe5e5 在本来是不可变的并且已被冻结的对象上。

我问了separate question for the same，但是由于某种原因，我收到的答复令人信服。

后记，我尝试了一种不同的方法（该方法不允许使用StyleSheet），但是我仍然遇到相同的错误。

我将新代码放在这里（您可以从问题中引用我以前的代码）

首先，我在这样的全局范围内声明了一个对象

var upperRow = {
    display: "flex",
    flexDirection: "row",
    marginBottom: 5, 
    backgroundColor: "white"
} 


class  CoinCard extends Component {

然后我尝试像这样更改背景颜色

  componentWillReceiveProps(nextProps) {

    if (this.props.coinPrice != nextProps.coinPrice ) {
       if (this.props.coinPrice > nextProps.coinPrice) {

           upperRow["backgroundColor"] = "#ffe5e5";
 }
}

接着分配这种样式

return (

    <View style={container}>

            <View style={upperRow}>

[问题：] ：如何动态更改样式？

Answer 1

您需要保持币种最近是否减少的状态。想象一下这种形状的状态：

state = {
  hasIncreased: boolean,
  hasDecreased: boolean,
}

现在您可以在componentWillReceiveProps中更改此状态（不过现在已不建议使用，因此，如果您使用的是16.3或更高版本，则可以考虑逐步淘汰其使用状态），如下所示：

componentWillReceiveProps(nextProps) {
  if (nextProps.coinPrice < this.props.coinPrice)
    this.setState({hasDecreased: true, hasIncreased: false})

  if (nextProps.coinPrice > this.props.coinPrice)
    this.setState({hasIncreased: true, hasDecreased: false})
}

现在您处于此状态，可以有条件地添加一些样式：

render() {
  const {hasIncreased, hasDecreased} = this.state
  return (
    <View style={[ //styles can be an array!
      upperRow, 
      hasIncreased && {backgroundColor: 'green'},
      hasDecreased && {backgroundColor: 'red'},
    ]}/>
  )
}

现在剩下的就是2秒后重置状态。在我看来，最好使用componentDidUpdate-生命周期

componentDidUpdate(prevProps) {
  // only queue the reset if it's actually necessary, not on random updates
  if (prevProps.coinPrice !== this.props.coinPrice) {
    clearTimeout(this.timeout)
    // we need to be able to reset the timeout
    this.timeout = setTimeout(
      () => this.setState({hasDecreased: false, hasIncreased: false}),
      2000,
    )
  }
}

您应该避免避免仅以可变的方式更改样式。重点是您的状态应该反映您所显示的内容。

反应本地动态样式

1 个答案: