Question

enter image description here enter image description here我正在处理一个视图，我已经成功显示了固定的第一种颜色，我希望在单击按钮时出现另一种颜色。我在骰子上做过工作，两个骰子的总和显示出来。我希望无论到哪个总数，它都会在视图中显示，如图所示，并且颜色会改变。

function currying(func) {
//I need to complete this for all diiferent forms of add
}


//1st form
const add = currying(function (a, b) {
    return a + b;
})
add(1, 2) //should yield 3
add(1)(2) //should yield 3

//second form
const add = currying(function (a, b, c) {
    return a + b + c;
})
add(1, 2)(3) //should yield 6
add(1)(2)(3) //should yield 6
add(1, 2, 3) //should yield 6

//third form
const add = currying(function (a, b, c, d) {
    return a + b + c + d;
})
const a11 = add(1)
a11(2)(3)(4) //should yield 9
a11(2, 3, 4) //should yield 9

我希望每当显示总数时，它就会以不同的颜色显示在视图中。enter image description here

Answer 1

要基于状态变量更改单个视图的颜色，您只需要在样式道具上添加条件即可。

例如：

    <View style={{    position: 'absolute',
   top: 0,
   left: 20,
   width: 50,
   height: 50,
   marginLeft:40,

   backgroundColor: this.state.sum===1?"red":'#006400'}}>

        <Text style={{justifyContent: 'center',flex: 1,textAlign: 
    'center',
   marginTop:10,
   color: '#ffffff',
     alignItems: 'center'}}>
          1
        </Text>
    </View>

像这样渲染它们时，您必须在每个View上进行渲染。

我建议循环使用一个函数创建一个，因为它们对数字的期望都相同。

Answer 2

toggleColor = () => {
  this.setState(p => {
    return {
      flag: !p.flag
    }
  })
}

render() {
  let color = 'red'
  if (flag) { // you can change this condition to anything
    color = 'green'
  } else {
    color = 'red'
  }
  return (
    <View style={{backgroundColor:color}}></View>
  )
}

要显示不同的颜色以在按钮上查看，请在react native中单击

2 个答案: